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

Question

你能告诉我下面两种方法的区别是什么吗？我应该在哪一刻使用它？

book.ts

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

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

当我们使用下面的内部组件时,它有时会起作用.有时它不是.为什么这种不同的行为有上述2种导航方法？

笔者-page.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组件,都将使用Root组件中的Nav.

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

这包含在文档中:

从叠加组件导航

如果您想从叠加组件(弹出窗口,模态,警报等)导航,该怎么办？在这个例子中,我们在我们的应用程序中显示了一个弹出框.从popover中,我们将使用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);
    }
  }