getRootNav() 和 navCtrl() 方法的区别

Question

你能告诉我以下两种方法有什么区别吗？我应该在哪个时刻使用它？

book.ts

this.app.getRootNav().push('FromBook', { bookId: this.data.id })

this.navCtrl.push('FromBook', { bookId: this.data.id });

当我们使用像下面这样的内部组件时，有时它会起作用。有时它不是。为什么上述两种导航方法会出现这种不同的行为？

作者页面.html

<div>
        <book *ngFor="let book of authorData?.books" [data]="book"></book>
</div>

Answer 1

这两种方法都将新页面添加到当前的 Nav 组件中，唯一的区别是 哪个 Nav Controller。

如果您的应用是一个选项卡页面，有多个选项卡，每个选项卡都有自己的导航组件。这就是为什么如果您尝试通过执行 this.navCtrl.push(ThePage) 从子选项卡内部推送页面，如果您切换到另一个选项卡，则不会显示新页面，但如果您返回上一个选项卡，该页面仍将显示可见的。这是因为页面被推送到了一个子 Nav 组件，即来自单个选项卡的 Nav 组件。

如果您使用this.app.getRootNav().push(ThePage)，则将新页面推送到根应用程序的 Nav 组件，因此您正在执行的组件是否具有自己的 Nav 组件（来自根组件的 Nav）并不重要将被使用。

标签只是一个例子，当您尝试从任何覆盖组件（弹出框、模式、警报等）推送页面时也是如此

这包含在the docs：

从覆盖组件导航

如果您想从覆盖组件（弹出框、 模态，警报等）？在这个例子中，我们在我们的 应用程序。从弹出窗口中，我们将获得根 NavController 的引用 在我们的应用中，使用 getRootNav() 方法。

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