離子2：從根組件導航

Question

這是什麼意思？

如果您想要控制來自根應用程序組件（用@App而不是@Page裝飾的組件）的導航？您無法注入NavController ，因爲任何導航控制器的組件都是根組件的子組件，因此它們無法注入。

通過添加一個id離子導航，您可以使用IonicApp服務去的導航組件，它是一個導航控制器的引用（它擴展NavController）：

Answer 1

請記住，網頁和組件不是一回事。

你的頁面全部導入NavController，所以不需要破解DOM！ :)只要您導入了該頁面（當前頁面需要知道要推送的頁面是否存在），您的當前頁面才能夠將任何其他頁面推到自己的頂部。

this.nav.push(OtherPage); 

同樣，當前頁面可以從視圖中彈出。

this.nav.pop(); 

它甚至可以直接更改根視圖。

this.nav.setRoot(OtherPage); 

最後，這Simple guide to navigation in ionic2會解釋這一切非常好...

Answer 2

以防萬一，如果這能幫助其他開發人員，並且由於在Ionic2公測8

@App和@頁面應該用@Component替換。

現在你應該可以做這樣的事情，從根組件導航：

import {Component, ViewChild, provide, PLATFORM_DIRECTIVES} from '@angular/core'; 
import {ionicBootstrap, App, Platform, MenuController, Nav} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {HomePage} from './pages/home/home'; 

@Component({ 
    templateUrl: 'build/app.html' 
}) 
class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = HomePage; 

    constructor(private platform: Platform, private menu: MenuController) { 
    this.initializeApp(); 
    } 

    initializeApp(): void { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
    }); 
    } 

    openPage(aPage: any) { 
    // close the menu when clicking a link from the menu 
    this.menu.close(); 

    // navigate to the new page if it is not the current page 
    this.nav.setRoot(aPage); 
    } 
} 

ionicBootstrap(MyApp, [], { 
    //config options 
}); 

Answer 3

從根組件定位，首先你要獲取組件，然後再設置它，請參閱下面的示例：

this.app.getRootNav（）。setRoot（VisitorsPage）;