我的应用程序有两种用户类型客户和员工,对于每种用户类型,我需要不同的菜单。我如何在app.component.html页面中添加一些条件,如: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>
1条答案
按热度按时间lf3rwulv1#
对于此方案,请使用
MenuController
示例:您可以在ionic documentation中找到有关如何使用
MenuController
控制多个菜单的详细信息。