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

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

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

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

该标签只是一个示例，当您尝试从任何重叠组件推送页面时，同样有效（popover，modal，alert等）

这包含在the docs：

中

从叠加组件导航

如果您想从叠加组件导航（popover，   模态，警报等）？在这个例子中，我们在我们的节目中显示了一个弹出窗口   应用程序。从popover中，我们将获得根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);
    }
  }

getRootNav（）和navCtrl（）方法之间的差异

1 个答案: