我有一个侧面菜单,共有3个组件,即-仪表板,信息和注销。 当我在“仪表板”组件中时,侧面菜单应该具有注销离子项目。
当我进入“信息”组件时,侧面菜单应该具有仪表板和注销离子项目。
基本上,如何根据不同的组件更改菜单离子项目
预先感谢...
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu side="end">
<ion-header>
<ion-toolbar>
<ion-title>{{'app.menu' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" (click)="myFunction(p)">
<ion-item [routerLink]="[p.url]">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
public pages: Array<{title: string, url: string, icon: string}>;
public appPages = [
{
title: 'Dashboard',
url: '/dashboard',
icon: 'tablet-portrait'
},
{
title: 'Info',
url: '/info',
icon: 'information-circle'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public translate: TranslateService
) {
this.initializeApp();
// set i18n
translate.setDefaultLang('en');
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}