angular - ¿Cuál es la diferencia entre Nav y el método push de NavController?

Estoy construyendo una aplicación Ionic y una parte importante de construir una aplicación, por supuesto, es la navegación de una página a otra.

Soy nuevo en Ionic y no estoy seguro de para qué se usa más cada cosa, en este momento estoy usando lo que parece funcionar, pero a largo plazo puede ser útil saber de antemano qué es mejor.

El método push de Nav y NavController parece estar haciendo prácticamente lo mismo, empuja una página/componente en la pila.

He usado ambos indistintamente en diferentes partes de la aplicación, así que ahora me preocupa si es un problema.

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

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

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

Y luego también esto

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

}

Las funciones están siendo llamadas desde elementos en la plantilla, ambos parecen hacer el trabajo como se espera, aunque me molesta por qué hay dos de tales módulos que hacen el mismo trabajo, debe haber algunas diferencias en sus funciones, revisar la documentación no me proporcionó mucha información.

Respuesta #1

Tiene principalmente 3 lugares. Puedes leer más sobre esto en documentación oficial aquí.

Nota: Obtuve toda la información del documento. Pero si tienes alguna aclaración específica sobre la información a continuación, no dudes en preguntar en la sección de comentarios.

1. Navegando desde el componente raíz

Aquí no puedes inyectar NavController porque cualquier componente que sea un controlador de navegación es hijo del componente root. Por lo tanto, no están disponibles para ser inyectados.

Al agregar una variable de referencia al ion-nav, puedes usar @ViewChild para obtener una instancia del componente Nav que es un controlador de navegación (extiende 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. Navegando desde un Componente Superpuesto

Cuando necesitas navegar desde un componente superpuesto (popover, modal, alerta, etc.) necesitas obtener una referencia del NavController raíz usando el método 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);
    }
  }

3. Creación de vista (es decir, Empujando una vista)

Si necesitas agregar una nueva vista a la pila de navegación, usa el método push.

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

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