側邊菜單沒有加載頁面

我有一個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); 
    } 

}

現在的問題是，一切工作正常。頁面加載後，菜單將從我的頁面數組中填充頁面。

我幾乎遵循了Ionic2站點的代碼，但是當我單擊菜單項時，它會觸發一系列控制檯錯誤。主要的錯誤是「無法讀取屬性」未定義的「推」'

頁面參數正在輸出組件的頁面，我們正在尋找火，所以我不太確定爲什麼這會回來爲未定義。

來源

2016-12-14 Shane Jones

檢查URL http://ionicframework.com/docs/v2/api/navigation/NavController/#你需要定義'@ ViewChild'並在'pages'數組項中看起來像'{title：'My Trips'，組件：TripsPage}' – ranakrunal9

完美的工作方式我需要它我將它從push改爲setRoot，但是完全更改了頁面，因爲它顯示了我的菜單圖標旁邊的Back按鈕，導致菜單項無效。 –

你想添加你的評論作爲答案，我會標記它嗎？謝謝 –

檢查NavControllerAPI documentation您需要定義@ViewChild和頁面陣列必須定義如下：

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

來源

2016-12-14 10:30:11 ranakrunal9

側邊菜單沒有加載頁面

回答

相關問題