[英]How to create two different ion menus in one ionic app?
我的應用程序有兩種用戶類型客戶和員工,對於他們每個人,我需要不同的菜單。 如何在 app.component.html 頁面中添加一些條件,例如 this.usertype = "Staff" 使用員工菜單,否則使用客戶菜單。 我嘗試使用不同的 ID,但在這種方法中,第一個菜單似乎消失了。 希望你能幫我! 提前致謝!
我在 app.component.html 中的當前代碼
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet">
<ion-app>
<ion-menu menuId="main-menu" side="start" content-id="main-content">
<ion-header>
<ion-toolbar translucent>
<ion-title style="font-family: 'Poppins';font-weight: 300;">Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item routerLink="/homepagee">
<ion-label style="font-family: 'Poppins'">Home</ion-label>
</ion-item>
<ion-item routerLink="/terms">
<ion-label style="font-family: 'Poppins'">Terms & Conditions</ion-label>
</ion-item>
<ion-item routerLink="/privacy">
<ion-label style="font-family: 'Poppins'">Privacy Policy</ion-label>
</ion-item>
<ion-item routerLink="/myaccount">
<ion-label style="font-family: 'Poppins'">My Details</ion-label>
</ion-item>
<ion-item routerLink="/home">
<ion-label style="font-family: 'Poppins'">Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu menuId="main-menu2" side="start" content-id="main-content2">
<ion-header>
<ion-toolbar translucent>
<ion-title style="font-family: 'Poppins';font-weight: 300;">Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item routerLink="/homepagee">
<ion-label style="font-family: 'Poppins'">Announcments</ion-label>
</ion-item>
<ion-item routerLink="/terms">
<ion-label style="font-family: 'Poppins'">Terms & Conditions</ion-label>
</ion-item>
<ion-item routerLink="/privacy">
<ion-label style="font-family: 'Poppins'">Privacy Policy</ion-label>
</ion-item>
<ion-item routerLink="/myaccount">
<ion-label style="font-family: 'Poppins'">Chat</ion-label>
</ion-item>
<ion-item routerLink="/home">
<ion-label style="font-family: 'Poppins'">Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
<ion-router-outlet id="main-content2"></ion-router-outlet>
</ion-app>
對於這種情況,請使用MenuController
示例:
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';
@Component({
selector: 'menu-example',
templateUrl: 'menu-example.html',
styleUrls: ['./menu-example.css'],
})
export class MenuExample {
constructor(private menu: MenuController) {
if(this.usertype = "Staff" ){
this.menu.enable(true, 'Your_Staff_MenuID');
}else{
this.menu.enable(true, 'Your_Other__MenuID');
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.