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