angular - getRootNav() 和 navCtrl() 方法之间的区别

Question

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

book.ts

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

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

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

author-page.html

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

Answer 1

这两种方法都向当前 Nav 组件添加一个新页面，唯一的区别在于哪个 Nav Controller。

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

如果您使用 this.app.getRootNav().push(ThePage)，您会将新页面推送到根应用程序的 Nav 组件，因此该组件位于何处并不重要你这样做有自己的 Nav 组件，将使用 Root 组件的 Nav。

选项卡只是一个示例，当您尝试从任何覆盖组件(弹出窗口、模态、警报等)推送页面时同样有效

这包含在 the docs 中:

Navigating from an Overlay Component

What if you wanted to navigate from an overlay component (popover, modal, alert, etc)? In this example, we've displayed a popover in our app. From the popover, we'll get a reference of the root NavController in our app, using the getRootNav() method.

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