Ionic Framework - 'nav'undefined嘗試推送頁面時

我正在嘗試使用Ionic框架製作Android應用程序。我實現了一個側面菜單，當我嘗試從側面菜單中按網頁，我在控制檯中的錯誤說：Ionic Framework - 'nav'undefined嘗試推送頁面時

無法讀取未定義

app.ts的特性「推」

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（示例頁面我要推的）

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

}

（我進口ModalController因爲我想預覽我的應用程序的用戶界面流動，因爲推不工作，我用每個頁面作爲模板僅用於預覽目的。對於最終的應用程序，我需要推和彈出）

來源

2016-09-26 user9492428

將@ViewChild設置爲NavController，但設置爲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); 
    } 
}

來源

2016-09-26 09:18:25 Ivaro18

修復它！非常感謝。任何你將它設置爲「Nav」而不是「NavController」的原因？ – user9492428

@ user9492428 tbh我不確定，甚至[離子文檔]（http://ionicframework.com/docs/v2/api/components/nav/NavController/#navigating-from-the-root-component）都會說使用NavController，儘管當使用'ionic generate myapp'時，他們會爲您提供'Nav'。也許他們會更新這個 – Ivaro18

對離子3，我用這個和它的作品！從子視圖調用父導航

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

來源

2017-11-27 21:52:25

Ionic Framework - 'nav'undefined嘗試推送頁面時

回答

相關問題