getRootNav() 和 navCtrl() 方法的区别 [英] Differences between getRootNav() and navCtrl() methods

问题描述

你能告诉我以下两种方法有什么区别吗?我应该在哪个时刻使用它?

book.ts

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

当我们使用像下面这样的内部组件时，有时它会起作用.有时它不是.为什么上述两种导航方法会出现这种不同的行为?

作者页面.html

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

解决方案

这两种方法都向当前的Nav组件添加一个新页面，唯一的区别是哪个Nav Controller.

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

如果您使用 this.app.getRootNav().push(ThePage)，您将新页面推送到根应用程序的 Nav 组件，因此组件在哪里并不重要您正在这样做有自己的 Nav 组件，将使用来自 Root 组件的 Nav.

标签只是一个示例，当您尝试从任何覆盖组件(弹出框、模式、警报等)推送页面时也是如此

这包含在文档:

<块引用>

从覆盖组件导航

如果您想从覆盖组件(弹出框、模态，警报等)?在这个例子中，我们在我们的应用程序.从弹出窗口中，我们将获得根 NavController 的引用在我们的应用中，使用 getRootNav() 方法.

从'@angular/core'导入{组件}；从 'ionic-angular' 导入 { App, ViewController }；@零件({模板:`<离子含量><h1>我的 PopoverPage</h1><button ion-button(click)="pushPage()">调用pushPage</button></离子含量>`})类 PopoverPage {构造函数(public viewCtrl: 视图控制器公共应用程序Ctrl:应用程序) {}推页(){this.viewCtrl.dismiss();this.appCtrl.getRootNav().push(SecondPage);}}

Can you tell me what are the differences of below 2 methods? Which moment should I use it?

book.ts

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

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

When we use inner components like below sometimes it works.Sometimes it is not.Why this kind of different behavior with above 2 navigation methods?

author-page.html

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

解决方案

Both methods add a new page to the current Nav component, the only difference is to which Nav Controller.

If your app is a Tabs page, with several tabs, each tab has its own Nav component. That's why if you try to push a page from inside of a child tab by doing this.navCtrl.push(ThePage) that new page won't be shown if you switch to another tab, but if you come back to the previous tab, that page will still be visible. That's because the page was pushed to a child Nav component, the Nav component from the single tab.

If you use this.app.getRootNav().push(ThePage), your pushing the new page to the Nav component of the root app, so it doesn't matter if the component where you are doing that has its own Nav component, the Nav from the Root component will be used.

The tab was just an example, the same is valid when you try to push a page from any overlay component (popover, modal, alert, etc)

This is included in the docs:

Navigating from an Overlay Component

What if you wanted to navigate from an overlay component (popover, modal, alert, etc)? In this example, we've displayed a popover in our app. From the popover, we'll get a reference of the root NavController in our app, using the getRootNav() method.

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() 方法的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！