離子3頁相同的菜單

我打造離子3應用程序，我有我的菜單有問題，我有兩頁，當我改變頁面，我的菜單是不一樣的：

這是我在主頁菜單：

這就是我的菜單，當我切換到另一個：

代碼：

openPage(page) { 
    // Reset the nav controller to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.rootPage = page; 

    // close the menu when clicking a link from the menu 
    this.menu.close(); 
}

有人可以幫助我嗎？

謝謝！

編輯：

這是我app.component.ts：

import {Component, ViewChild} from "@angular/core"; 
import {Events, MenuController, NavController, Platform, Nav} from "ionic-angular"; 
import {ControlPanelComponent} from "../pages/controlpanel/controlpanel"; 
import {TicketJourPage} from "../pages/ticket-jour/ticket-jour"; 
import {SplashScreen} from "@ionic-native/splash-screen"; 
import {PronosServiceProvider} from '../providers/pronos-service/pronos-service'; 
@Component({ 
    templateUrl: 'app.html', 
    providers: [PronosServiceProvider], 
}) 
export class MyApp { 
    @ViewChild(Nav) navCtrl; 
    public homePage = ControlPanelComponent; 
    public settingsPage = ControlPanelComponent; 
    public ticketdujour = TicketJourPage; 
    public splash = new SplashScreen(); 
    public rootPage: any; 
    public nameUser : string; 


    constructor(public platform: Platform, 
       public menu: MenuController, 
       public events: Events,) { 
     console.log("In MyApp constructor"); 
      console.log("Hiding splash screen"); 
      this.splash.hide(); 
    } 
    openPage(page) { 
     //this.rootPage = page; 
     console.log("OPENPAGE") 
     this.navCtrl.setroot(page.component); 

     // close the menu when clicking a link from the menu 
     this.menu.close(); 
    } 

}

這是我app.html：

<ion-menu id="loggedInMenu" [content]="content" style="background-color: transparent;" persistent="true"> 
    <ion-content style="background: url('img/background.jpg'); background-size: cover;"> 
     <ion-list style="background-color: transparent;" no-lines> 
      <ion-item style="background-color: transparent; margin-top: 10px;" class="logo" align="left"> 
       <p class="font3" style="color: white; font-size: 1rem; margin-left: -80px">{{ vari.Username }}</p><br> 
       <p [hidden]="vari.bool" class="font3" style="color: #ffae00; font-size: 1rem;" align="left">Premium - </p><p class="test" style="color: white; font-size: 1rem;">{{ vari.date }}</p> 
      </ion-item> 
     </ion-list> 

     <ion-list style="background-color: transparent;"> 
      <button ion-item (click)="openPage(ticketdujour)" style="background-color: transparent;" > 

       <p class="font3" style="color: white; font-size: 1.1rem;">Ticket du Jour</p> 
      </button> 
      <button ion-item (click)="openPage(homePage)" style="background-color: transparent;"> 

       <p class="font3" style="color: white; font-size: 1.1rem;">Pronostiques</p> 
      </button> 
      <button ion-item (click)="openPage(pronopage)" style="background-color: transparent;"> 

       <p class="font3" style="color: white; font-size: 1.1rem;">Gestion de Bankroll</p> 
      </button> 
      <button ion-item (click)="openPage(homePage)" style="background-color: transparent;"> 

       <p class="font3" style="color: white; font-size: 1.1rem;">Aide à l'analyse</p> 
      </button> 
      <button ion-item (click)="openPage(homePage)" style="background-color: transparent;"> 

       <p class="font3" style="color: white; font-size: 1.1rem;">Premium</p> 
      </button> 
      <button ion-item (click)="openPage(homePage)" style="background-color: transparent;"> 

       <p class="font3" style="color: white; font-size: 1.1rem;">Profil</p> 
      </button> 
      <button ion-item (click)="openPage(logoutPage)" style="background-color: transparent;"> 
       <p class="font3" style="color: white; font-size: 1.1rem;">Déconnexion</p> 
      </button> 
     </ion-list> 
    </ion-content> 
</ion-menu> 

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

PS：vari.Username爲〔實施例是全球Varibales。

來源

2017-07-31 Fernando Junior

嘗試更具體地說明您的答案。 – JoshKopen

是的，很抱歉，我想知道爲什麼我的菜單在我的應用程序中更改頁面時發生了變化（請參見圖片） –

在默認sidemenu模板，在app.component.ts的openPage（頁）功能看起來是這樣，

openPage(page){ this.nav.setroot(page.component); }

需要注意的是，page.component是一個字符串「主頁」如果你使用了Lazy Loading。這裏this.nav指的是Nav from ionic-angular，menu.html默認在app.html文件中。這完全沒有任何錯誤，因爲你說，所以我建議你遵循默認的模板代碼，這是爲了指導你如何編寫IONIC APP的代碼！

如果您仍然遇到任何問題，請分享您的HTML代碼。

來源

2017-07-31 18:06:52

感謝您的回答！但是這不起作用，我有「this.navCtrl.setroot不是一個函數」...我有我的app.html和app.component.ts編輯我的帖子 –

在App.component.ts，建議不要使用NavController，U可以嘗試導航而不是NavController –

這是功能檢查你打開的頁面，取決於你可以統治側菜單，只要你喜歡。

`appCtrl.viewWillEnter.subscribe(
    (view) => { 
    // here you can check page and do as you want 
    }`

來源

2017-08-02 07:59:37

離子3頁相同的菜單

回答

相關問題