Ionic 如何在一个离子应用程序中创建两个不同的离子菜单？

xxls0lw8 于 2023-01-22 发布在 Ionic

关注(0)|答案(1)|浏览(187)

我的应用程序有两种用户类型客户和员工，对于每种用户类型，我需要不同的菜单。我如何在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>

ionic-framework

来源：https://stackoverflow.com/questions/66716316/how-to-create-two-different-ion-menus-in-one-ionic-app

1条答案

按热度按时间

lf3rwulv1#

对于此方案，请使用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'); 
   }
 }   

}

您可以在ionic documentation中找到有关如何使用MenuController控制多个菜单的详细信息。

赞(0）回复(0）举报 2023-01-22

我来回答

Ionic 如何在一个离子应用程序中创建两个不同的离子菜单？

1条答案

相关问题

热门标签

最新问答