angular - Nav和NavController的push方法有什么区别

我正在构建一个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 );
  }

}

这些函数是从模板中的元素调用的，它们似乎都按预期完成了任务，尽管这让我很恼火，为什么有两个这样的模块执行相同的任务，但它们的功能肯定有些不同，浏览文档并没有给我提供太多信息。

最佳答案

主要有三个地方。您可以在official doc here上阅读更多关于此的信息。
注：我从医生那里得到了所有的信息。但是如果你对下面的信息有任何具体的澄清，请在评论部分询问。
一。从根组件导航
这里不能注入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.从覆盖组件导航
当需要从覆盖组件（popover、model、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);
    }
  }

三。视图创建（即推送视图）
如果需要将新视图推送到导航堆栈上，请使用push方法。

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

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

关于angular - Nav和NavController的push方法有什么区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47051201/