侧边菜单不加载页面

Question

我有一个 Ionic2 应用程序，它有一个基本的侧边菜单布局，有几个页面需要加载才能查看。

我的 app.html 看起来像这样

<ion-menu [content]="content" persistent="true">

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p.component)">
                {{ p.title }}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


<ion-nav [root]="rootPage" #content></ion-nav>

我的 app.component.ts 看起来像这样。

import { Component } from '@angular/core';

import {IonicApp, Platform, NavController} from 'ionic-angular';
import {LoginPage} from '../pages/login/login';

import {MessagesPage} from '../pages/messages/messages';
import {ProfilePage} from '../pages/profile/profile';
import {TripsPage} from '../pages/trips/trips';


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

export class PitchHikeApp {

    rootPage = LoginPage;

    static get parameters() {
        return [[IonicApp], [Platform]];
    }

    constructor(public navCtrl: NavController) {}

    pages = [
        {title: 'My Trips', component: 'TripsPage'},
        {title: 'Messages', component: 'MessagesPage'},
        {title: 'Profile', component: 'ProfilePage'}
    ]

    openPage(page) {
        console.log(page);
        this.navCtrl.push(page);
    }

}

我现在的问题是一切正常。页面加载，菜单填充我的 pages 数组中的页面。

我几乎遵循了 Ionic2 网站上的代码，但是当我单击菜单项时，它会触发大量控制台错误。主要错误是“无法读取未定义的属性'push'”

页面参数正在输出我们要触发的页面的组件，所以我不太确定为什么它会以未定义的形式返回。

Answer 1

检查NavController API documentation 你需要定义@ViewChild 和 pages 数组需要定义如下：

pages = [
    {title: 'My Trips', component: TripsPage},
    {title: 'Messages', component: MessagesPage},
    {title: 'Profile', component: ProfilePage}
];