Ionic 2：從根組件導航

Question

這是什么意思？

如果您想從根應用程序組件（用@App 而非@Page 裝飾的組件）控制導航怎么辦？ 你不能注入 NavController因為導航控制器的任何組件都是根組件的子組件，所以它們不能被注入。

通過向 ion-nav 添加 id，您可以使用 IonicApp 服務獲取對 Nav 組件的引用，該組件是導航控制器（它擴展了 NavController）：

Answer 1

以防萬一這是否可以幫助其他開發人員，並且在 Ionic2 beta 8 中

@App 和@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
});

Answer 2

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

你的頁面都導入了NavController，所以不需要破解DOM！！ :) 您的當前頁面能夠在其自身之上推送任何其他頁面，只要您導入該頁面（當前頁面需要知道要推送的頁面的存在）。

this.nav.push(OtherPage);

類似地，當前頁面可以從視圖中彈出。

this.nav.pop();

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

this.nav.setRoot(OtherPage);

最后，這個在ionic2中導航的簡單指南將很好地解釋這一切......

Answer 3

要從根組件導航，首先您必須獲取該組件，然后再次設置它，請參見下面的示例：

this.app.getRootNav().setRoot(visitorsPage);