getRootNav() 和 navCtrl() 方法之间的差异

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

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>

两种方法都向当前 Nav 组件添加新页面，唯一的区别是哪个导航控制器.

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

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

该选项卡只是一个示例，当您尝试从任何位置推送页面时，该选项卡都是有效的覆盖组件（弹出框、模式、警报等）

这包含在the docs https://ionicframework.com/docs/api/navigation/NavController/#navigating-from-an-overlay-component:

从覆盖组件导航

如果您想从覆盖组件（弹出窗口、 模式、警报等）？在此示例中，我们在我们的窗口中显示了一个弹出窗口 应用程序。从弹出窗口中，我们将获得根 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);
    }
  }