离子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）;