getRootNav（）和navCtrl（）方法之间的区别

Question

你能告诉我以下两种方法有什么不同吗？我应该在哪一刻使用它？

book.ts

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

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

当我们使用如下有时works.Sometimes它是not.Why这种不同的行为与上述2的导航方法的内部部件？

作者-page.html中

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

Answer 1

这两种方法添加一个新的页面，以目前的导航组件，唯一的区别就是其导航控制器。

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

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

的标签只是一个例子，同样是有效的，当你尝试从

这包括在the docs任何覆盖组件（酥料饼，莫代尔，警报等）推页：

从

导航的覆盖组件

什么，如果你想从覆盖组件（酥料饼， 模式，警报等）进行导航？在这个例子中，我们在我们的 应用程序中显示了一个弹出窗口。从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); 
    } 
    }