Ionic Framework - 'nav' undefined beim Versuch, Seiten zu pushen

Question

Ich versuche, eine Android-App mit Ionic Framework zu machen. Ich implementierte eine Seite im Menü und wenn ich versuche, Seiten von der Seite Menü zu drücken, bekomme ich einen Fehler in der Konsole sagen:

nicht Eigentum ‚Push‘ von undefined

app.ts Kann lesen

import { Component, ViewChild } from '@angular/core'; 
import { ModalController, ionicBootstrap, Platform, MenuController, NavController } from 'ionic-angular'; 
import { StatusBar } from 'ionic-native'; 

import { HomePage } from './pages/home/home'; 
import {AppSettingsPage} from "./pages/app-settings/app-settings"; 
import {TabsPage} from "./pages/tabs/tabs"; 
import {ReserveRoomPage} from "./pages/reserve-room/reserve-room"; 
import {ConfirmedReservationsPage} from "./pages/confirmed-reservations/confirmed-reservations"; 


@Component({ 
    templateUrl: 'build/app.html', 
    providers: [NavController] 
}) 
export class MyApp { 
    @ViewChild('nav') nav: NavController; 
    private rootPage: any; 
    private pages: any[]; 
    private icon = 'cog'; 

    constructor(private platform: Platform, private menu: MenuController, 
    private modalCtrl: ModalController) { 
    this.menu = menu; 
    this.pages = [ 
     {title: 'Home', component: HomePage, icon: 'home'}, 
     {title: 'Settings', component: AppSettingsPage, icon: 'settings'}, 
     {title: 'Reserve Room', component: ReserveRoomPage, icon: 'add'}, 
     {title: 'My Reservations', component: ConfirmedReservationsPage, icon: 'book'}, 
    ]; 
    this.rootPage = TabsPage; 

    platform.ready().then(() => { 
     StatusBar.styleDefault(); 
    }); 
    } 

    openPage(page){ 
    this.menu.close(); 
    this.nav.push(page.component); 
    } 

} 

ionicBootstrap(MyApp); 

app.html

<ion-menu [content] = "content"> 
    <ion-toolbar> 
    <ion-title><strong>Giman</strong>.lk</ion-title> 
    </ion-toolbar> 
    <ion-content> 
    <ion-list> 
     <button ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     <ion-icon name="{{ p.icon }}"></ion-icon> {{ p.title }} 
     </button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav> 

app-settings.ts (Beispiel einer Seite, die ich schieben will)

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

@Component({ 
    templateUrl: 'build/pages/app-settings/app-settings.html', 
}) 
export class AppSettingsPage { 

    constructor(private navCtrl: NavController, private view: ViewController) { 

    } 
    goBack(){ 
    this.view.dismiss(); 
    } 

} 

(I ModalController importiert, weil ich wollte, dass mein App UI fließen, um eine Vorschau und weil Push nicht funktionierte, habe ich jede Seite als Modal nur für Vorschauzwecke. Für die letzte App brauche ich Push und Pop)

Answer 1

Setzen Sie die @ViewChild auf NavController aber Nav.

import { Nav } from 'ionic-angular'; 

..... 

@Component({ 
    templateUrl: "build/app.html" //no need for the provider 
}) 

class MyApp{ 
    @ViewChild(Nav) nav:Nav; //remove the 'id' from the HTML, it will find the ion-nav tag 
    .... 
    someFunction(){ 
    this.nav.push(YourComponent); 
    //or 
    this.nav.setRoot(YourComponent); 
    } 
} 

Answer 2

ionischer 3 verwendet ich dies und es funktioniert !! Mutter nav von childview

var navParent = this.navCtrl.parent.parent as NavController; 
    navParent.push('DetailsTabPage')