Question

我是新来的！

我在Ionic 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：exmaple的vari.Username是Global Varibales。

Answer 1

在默认的sidemenu模板中，在app.component.ts中， openPage（页面）功能将如下所示，

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

请注意，page.component是一个字符串＆＃34; HomePage＆＃34;如果您使用了Lazy Loading。这里this.nav从离子角度引用导航，并且appclix文件默认提供menuclose属性。这完全没有任何错误，你说，所以我建议你按照默认模板代码，这是为了指导你如何为IONIC APP编码!!

如果您仍然遇到任何问题，请分享您的HTML代码。

Answer 2

这是功能检查你打开的页面，取决于你可以随意统治侧面菜单。

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

Ionic 3相同的菜单进入页面

2 个答案: