angular - ความแตกต่างระหว่างเมธอด getRootNav() และ navCtrl()

คุณช่วยบอกฉันได้ไหมว่าความแตกต่างของวิธีการทั้ง 2 ด้านล่างคืออะไร? ฉันควรใช้มันในช่วงเวลาไหน?

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>

คำตอบ #1

ทั้งสองวิธีเพิ่มหน้าใหม่ลงในคอมโพเนนต์ Nav ปัจจุบัน ความแตกต่างเพียงอย่างเดียวคือ ไปยังตัวควบคุม Nav ใด

หากแอปของคุณเป็นหน้าแท็บ ที่มีหลายแท็บ แต่ละแท็บมีคอมโพเนนต์ Nav ของตัวเอง นั่นเป็นเหตุผลว่าทำไมถ้าคุณพยายามที่จะดันหน้าออกมาจากภายในแท็บย่อยโดยการทำ this.navCtrl.push(ThePage) หน้านั้นจะไม่ถูกแสดงหากคุณสลับไปแท็บอื่น แต่ถ้าคุณกลับไปที่แท็บก่อนหน้า หน้านั้นก็ยังคงมองเห็นได้ เนื่องจากหน้านั้นถูกดันไปยังคอมโพเนนต์ Nav ของแท็บย่อย Nav component จากแท็บเดียว

ถ้าคุณใช้ this.app.getRootNav().push(ThePage) สิ่งที่คุณกำลังทำคือการผลักหน้าใหม่ไปยังคอมโพเนนต์ Nav ของแอปหลัก ดังนั้นไม่สำคัญว่าคอมโพเนนต์ที่คุณกำลังทำอยู่นั้นมีคอมโพเนนต์ Nav ของตัวเองหรือไม่ Nav จากคอมโพเนนต์หลักจะถูกใช้

แท็บเป็นเพียงตัวอย่าง สิ่งเดียวกันนี้ใช้ได้เมื่อคุณพยายามผลักดันหน้าจอจาก ส่วนประกอบ overlay ใด ๆ (popover, modal, alert, เป็นต้น)

นี่รวมอยู่ในเอกสารด้วย:

การนำทางจากส่วนประกอบโอเวอร์เลย์

จะเกิดอะไรขึ้นถ้าคุณต้องการนำทางจากคอมโพเนนต์โอเวอร์เลย์ (popover, modal, alert, ฯลฯ)? ในตัวอย่างนี้ เราได้แสดง 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);
    }
  }