javascript – Ionic Framework – 尝试推送页面时,’nav’未定义
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Ionic Framework – 尝试推送页面时,’nav’未定义,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2678字,纯文字阅读大概需要4分钟。
内容图文
![javascript – Ionic Framework – 尝试推送页面时,’nav’未定义](/upload/InfoBanner/zyjiaocheng/796/6f731b5844d04f4287947b97fc5bd0d4.jpg)
我正在尝试使用Ionic框架制作Android应用程序.我实现了一个侧面菜单,当我尝试从侧面菜单中推送页面时,我在控制台中收到错误消息:
Cannot read property ‘push’ of 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,因为我想预览我的App UI流程,因为push不起作用,我将每个页面用作模态仅用于预览目的.对于最终的应用程序,我需要push和pop)
解决方法:
将@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);
}
}
内容总结
以上是互联网集市为您收集整理的javascript – Ionic Framework – 尝试推送页面时,’nav’未定义全部内容,希望文章能够帮你解决javascript – Ionic Framework – 尝试推送页面时,’nav’未定义所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。