javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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

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

@ -33,7 +33,6 @@ import { ViewController } from './view-controller';
* *
* ```typescript * ```typescript
* import { Component } from `@angular/core`; * import { Component } from `@angular/core`;
* import { ionicBootstrap } from 'ionic-angular';
* import { StartPage } from './start-page'; * import { StartPage } from './start-page';
* *
* @Component( * @Component(
@ -41,13 +40,12 @@ import { ViewController } from './view-controller';
* }) * })
* class MyApp { * class MyApp {
* // set the rootPage to the first page we want displayed * // set the rootPage to the first page we want displayed
* private rootPage: any = StartPage; * public rootPage: any = StartPage;
* *
* constructor(){ * constructor(){
* } * }
* } * }
* *
* ionicBootstrap(MyApp);
* ``` * ```
* *
* ### Injecting NavController * ### Injecting NavController
@ -85,25 +83,57 @@ import { ViewController } from './view-controller';
* *
* ```typescript * ```typescript
* *
* import { App, ViewChild } from '@angular/core'; * import { Component, ViewChild } from '@angular/core';
* import { NavController } from 'ionic-angular'; * import { NavController } from 'ionic-angular';
* *
* @App({ * @Component({
* template: '<ion-nav #myNav [root]="rootPage"></ion-nav>' * template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
* }) * })
* export class MyApp { * export class MyApp {
* @ViewChild('myNav') nav: NavController * @ViewChild('myNav') nav: NavController
* private rootPage = TabsPage; * public rootPage = TabsPage;
* *
* // Wait for the components in MyApp's template to be initialized * // Wait for the components in MyApp's template to be initialized
* // In this case, we are waiting for the Nav with id="my-nav" * // In this case, we are waiting for the Nav with reference variable of "#myNav"
* ngAfterViewInit() { * ngOnInit() {
* // Let's navigate from TabsPage to Page1 * // Let's navigate from TabsPage to Page1
* this.nav.push(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 * ## View creation
* Views are created when they are added to the navigation stack. For methods * Views are created when they are added to the navigation stack. For methods
* like [push()](#push), the NavController takes any component class that is * 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>` * <ion-content>I'm the other page!</ion-content>`
* }) * })
* class OtherPage { * class OtherPage {
* constructor(private navCtrl: NavController ){ * constructor(public navCtrl: NavController ){
* } * }
* *
* popView(){ * popView(){