Javascript 离子2：从根组件导航

这是什么意思

如果您想从根应用程序组件（用@app而不是@Page装饰的组件）控制导航，该怎么办？您无法注入NavController，因为任何作为导航控制器的组件都是根组件的子组件，因此无法注入它们。

---

通过向ion nav添加id，您可以使用IonicApp服务获取对导航组件的引用，导航组件是导航控制器（它扩展了导航控制器）：

请记住，页面和组件不是一回事

您的页面都导入NavController，因此无需破解DOM！！：）只要您导入了该页面（当前页面需要知道要推送的页面的存在），您的当前页面就能够推送任何其他页面

同样，当前页面也可以从视图中弹出

this.nav.pop();

它甚至可以直接更改根视图

this.nav.setRoot(OtherPage);

---

最后，这将很好地解释这一切…

以防万一，如果这可以帮助其他开发人员，因为在Ionic2 beta 8中

@应用程序和@Page应替换为@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
});

---

要从根组件导航，首先必须获取组件，然后再次设置，请参见下面的示例：

---

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

我在这里也面临同样的问题，你找到解决方案了吗？你面临什么问题访问应用程序构造函数中的NavController，但我找到了解决方案，将id添加到ion nav元素尝试在构造函数中作为公共参数访问，如果我想从其他页面（不是MyApp）更改页面如何将其命名为.nav.setRoot（aPage）；从其他页面，或获取此参考？

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
});