javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(navController): add note about overlay components

Browse Source
This commit is contained in:
Mike Hartington
2016-11-16 09:00:56 -08:00
committed by Adam Bradley
parent d283aa0057
commit c16e56634d
1 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/navigation/nav-controller.ts
View File

@ -18,7 +18,7 @@ import { ViewController } from './view-controller';
* arbitrary locations in history.
*
* The current page is the last one in the array, or the top of the stack if we
* think of it that way. [Pushing](#push) a new page onto the top of the
* think of it that way. [Pushing](#push) a new page onto the top of the
* navigation stack causes the new page to be animated in, while [popping](#pop)
* the current page will navigate to the previous page in the stack.
*
@ -33,7 +33,6 @@ import { ViewController } from './view-controller';
*
* ```typescript
* import { Component } from `@angular/core`;
* import { ionicBootstrap } from 'ionic-angular';
* import { StartPage } from './start-page';
*
* @Component(
@ -41,13 +40,12 @@ import { ViewController } from './view-controller';
* })
* class MyApp {
* // set the rootPage to the first page we want displayed
* private rootPage: any = StartPage;
* public rootPage: any = StartPage;
*
* constructor(){
* }
* }
*
* ionicBootstrap(MyApp);
* ```
*
* ### Injecting NavController
@ -85,25 +83,57 @@ import { ViewController } from './view-controller';
*
* ```typescript
*
* import { App, ViewChild } from '@angular/core';
* import { Component, ViewChild } from '@angular/core';
* import { NavController } from 'ionic-angular';
*
* @App({
* @Component({
* template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
* })
* export class MyApp {
* @ViewChild('myNav') nav: NavController
* private rootPage = TabsPage;
* public rootPage = TabsPage;
*
* // Wait for the components in MyApp's template to be initialized
* // In this case, we are waiting for the Nav with id="my-nav"
* ngAfterViewInit() {
* // In this case, we are waiting for the Nav with reference variable of "#myNav"
* ngOnInit() {
* // Let's navigate from TabsPage to Page1
* this.nav.push(Page1);
* }
* }
* ```
*
* ### Navigating from an Overlay Component
* What if you wanted to navigate from an overlay component (popover, modal, alert, etc)?
* In this example, we've displayed a popover in our app. From the popover, we'll get a
* reference of the root `NavController` in our app, using the `getRootNav()` method.
*
*
* ```typescript
* import { Component } from '@angular/core';
* import { App, ViewController } from 'ionic-angular';
*
* @Component({
* template: `
* <ion-content>
* <h1>My PopoverPage</h1>
* <button ion-button (click)="pushPage()">Call pushPage</button>
* </ion-content>
* `
* })
* class PopoverPage {
* constructor(
* public viewCtrl: ViewController
* public appCtrl: App
* ) {}
*
* pushPage() {
* this.viewCtrl.dismiss();
* this.appCtrl.getRootNav().push(SecondPage);
* }
* }
*```
*
*
* ## View creation
* Views are created when they are added to the navigation stack. For methods
* like [push()](#push), the NavController takes any component class that is
@ -195,7 +225,7 @@ import { ViewController } from './view-controller';
* <ion-content>I'm the other page!</ion-content>`
* })
* class OtherPage {
* constructor(private navCtrl: NavController ){
* constructor(public navCtrl: NavController ){
* }
*
* popView(){