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尝试推送页面时

回答

相关问题