首页 文章

离子2：从根组件导航

提问于
浏览 次
3

这是什么意思？

如果您想从根应用程序组件（用@App，而不是@Page装饰的那个）控制导航，该怎么办？你不能注入NavController because any components that are navigation controllers are children of the root component so they aren’t available to be injected.

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

javascript ionic-framework navigation ionic2

3 回答

  • 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
});
    回复于
  • 0

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

    你的页面全部导入NavController，所以没有必要破解DOM !! :)您当前页面能够推送任何其他页面，只要您导入该页面（当前页面需要知道要推送的页面的存在） .

    this.nav.push(OtherPage);

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

    this.nav.pop();

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

    this.nav.setRoot(OtherPage);

    最后，这个Simple guide to navigation in ionic2会很好地解释一下......

    回复于
  • 0

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

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

    回复于

相关问题