Question

我正在构建一个Ionic应用程序，构建应用程序的主要部分当然是从一个页面导航到另一个页面。

我是Ionic的新手，我不确定什么是主要用于什么，现在我正在使用似乎有用的东西，但从长远来看，事先知道什么是更好的可能是有用的。

Nav和NavController的push方法似乎做了很多相同的事情，将页面/组件推送到堆栈上。

我已经在应用的不同部分互换使用它们，所以我现在担心这是否是一个问题。

import { Nav, Platform } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  @ViewChild(Nav) nav: Nav;
  public openMessageListPage() {
    this.nav.push(MessageListPage);
  }
}

然后也是这个

import { IonicPage, NavController } from 'ionic-angular';

export class MessageListPage {
  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {}

  notificationItemDetail(evt, item) {
    this.navCtrl.push( MessageItemPage );
  }

}

这些函数是从模板中的元素调用的，两者似乎都按预期完成了工作，虽然它让我觉得为什么有两个这样的模块做同样的工作，它们的功能必须有一些不同，浏览文档并没有为我提供太多信息。

Answer 1

主要有3个地方。您可以在official doc here上了解详情。

注意：我从doc获得了所有信息。但如果您对以下信息有任何具体说明，请随时在评论部分询问。

<强> 1。从根组件导航

此处您无法注入NavController，因为导航控制器的任何组件都是root组件的子组件。因此无法注射它们。

通过向ion-nav添加引用变量，您可以使用@ViewChild来获取Nav组件的实例，该组件是导航控制器（它扩展为NavController）：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage: any = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

<强> 2。从叠加组件导航

当您需要从叠加组件（弹出窗口，模态，警报等）导航时，您需要使用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);
    }
  }

第3。查看创建（即推送视图）

如果您需要将新视图推送到导航堆栈，请使用push方法。

export class StartPage {
  constructor(public navCtrl: NavController) {
  }

  pushPage(){
    this.navCtrl.push(OtherPage, {
      id: "123",
      name: "Carl"
    });
  }
}

Nav和NavController的推送方法有什么区别

1 个答案: