Nav和NavController的push方法有什么区别答案

【问题标题】：What is the difference between Nav and NavController's push methodNav和NavController的push方法有什么区别
【发布时间】：2017-11-01 17:41:26
【问题描述】：

我正在构建一个 Ionic 应用程序，构建应用程序的主要部分当然是从一个页面导航到另一个页面。

我是 Ionic 的新手，我不确定什么主要用于什么，现在我正在使用任何似乎有效的东西，但从长远来看，事先了解什么更好可能会很有用。

Nav 和 NavController 的 push 方法似乎在做同样的事情，将页面/组件推入堆栈。

我在应用程序的不同部分交替使用了这两种方法，所以我现在担心这是否有问题。

import { Nav, Platform } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  @ViewChild(Nav) nav: Nav;
  public openMessageListPage() {
    this.nav.push(MessageListPage);
  }
}

还有这个

import { IonicPage, NavController } from 'ionic-angular';

export class MessageListPage {
  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {}

  notificationItemDetail(evt, item) {
    this.navCtrl.push( MessageItemPage );
  }

}

这些函数是从模板中的元素调用的，两者似乎都按预期完成了工作，虽然这让我感到困惑，为什么有两个这样的模块做同样的工作，它们的功能必须有一些差异，浏览文档并没有为我提供太多信息。

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

主要有3个地方。您可以在 official doc here 上阅读更多相关信息。

注意：我从文档中获得了所有信息。但是，如果您对以下信息有任何具体说明，请随时在 cmets 部分询问。

1.从 Root 组件导航

在这里您不能注入NavController，因为任何作为导航控制器的组件都是root 组件的子组件。所以它们不能被注入。

通过向ion-nav 添加引用变量，您可以使用@ViewChild 来获取Nav 组件的实例，它是一个导航控制器（它扩展了NavController）：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage: any = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

2。从 Overlay 组件导航

当您需要从覆盖组件（popover、modal、alert 等）导航时，您需要使用 getRootNav() 方法获取根 NavController 的引用。

import { Component } from '@angular/core';
import { App, ViewController } from 'ionic-angular';

@Component({
    template: `
    <ion-content>
      <h1>My PopoverPage</h1>
      <button ion-button (click)="pushPage()">Call pushPage</button>
     </ion-content>
    `
  })
  class PopoverPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    pushPage() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().push(SecondPage);
    }
  }

3。视图创建（即推送视图）

如果您需要将新视图推送到导航堆栈，请使用push 方法。

export class StartPage {
  constructor(public navCtrl: NavController) {
  }

  pushPage(){
    this.navCtrl.push(OtherPage, {
      id: "123",
      name: "Carl"
    });
  }
}

【讨论】：