如何在ionic2/3中创建动态侧边导航菜单和子菜单 [英] How to create dynamic side navigation menu&Submenu in ionic2/3

问题描述

我在这里遇到了一个小问题，我正在获取以下动态数据

I am facing a small issue here im getting the below dynamic data

{
  "Name": "Steve",
  "Id": 37,
  "email": "[e-mail]",
  "User": 10,
  "DevId": "A7E6E6FE7060",
  "AllowedMenu": [
    {
      "Name": "Main",
      "Id": 6,
      "Component": "MainComponent",
      "IsVisibleAsMenu": true
    },
    {
      "Name": "SessionData",
      "Id": 7,
      "Name": SessionComponent,
      "IsVisibleAsMenu": false
    },
    {
      "Name": "LoginData",
      "Id": 8,
      "Name": "LoginDataComponent",
      "IsVisibleAsMenu": true
    }
  ],
  "AllowedOptions": [
    {
      "Name": "UpdatedData",
      "Id": 9
    },
    {
      "Name": "PreviousData",
      "Id": 10
    }
  ]
}

使用用户名和密码登录后，通过使用我必须构建动态侧导航得到上述响应.目前，我正在遵循一种方法，即在登录页面中使用 switch 案例，我提到了每个组件，如果案例正确，那么它将转到该特定页面.以下是我的问题

After loggin in by using username and password im getting the above response by using that i have to build the dynamic side navigation. At present im following a approach by using the switch case in login page im mentioning each and every component and if the case is correct then it is going to that particular page. below are my issues

还有其他获取动态侧边导航的方法吗?登录后根据响应创建侧导航.

Are there any other approaches for getting Dynamic Side navigation ? after login based on the response the side navigation is created.

1.如何在动态侧边导航中创建子菜单?

1.How can i create Sub menus in dynamic side navigation?

2.here AllowedMenu 是菜单内容，IsVisibleAsMenu 表示我们显示菜单然后为 true 否则为 false

2.here AllowedMenu is menu content and IsVisibleAsMenu mean it we to display menu then true other wise false

推荐答案

这是一个 工作示例

首先，您需要一个提供商来保存您的菜单项.在上面的例子中:
app-service.ts

First, you need a provider to save your menu items. In the example above:
app-service.ts

import { Subject } from 'rxjs/Subject';

userId = 1; //this varible store your userId
menuItems = []; //this array store your menu items
menuSubject: Subject<string> = new Subject<string>(); //Here is the subject will broadcast an event whenever menu item change

//this function is called when you change the user
changeUser(userId) {
    this.userId = userId;
    //Get menu data from server then update your menu
     if(userId == 1){
        this.menuItems = [...] //See all code in the example above
     }
    this.menuSubject.next("new menu items have arrived");
  }

其次，在您的应用中显示菜单:
app.html:

Second, in your show the menu in your app:
app.html:

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
  <ion-list>
    <ion-item class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component)">{{item.name}}</ion-item>
  </ion-list>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

app.component.ts:

import { Platform, MenuController, App } from 'ionic-angular';
constructor(platform: Platform,
    private appService: AppService,
    private menuCtrl: MenuController){
    this.menuItems = this.appService.menuItems;
    //Subscribe whenever menu items changed
    this.appService.menuSubject.asObservable().subscribe(() => {
      this.menuItems = this.appService.menuItems;
      this.menuCtrl.open();
    })
}

//This function is called whenever menu item clicked
itemClick(component){
    this.rootPage = component;
}

最后，每当您更改用户(通过登录或任何您想要的)时，调用 appService 中的 changeUser 方法home.ts:

Finnally, whenever you change the user (by login or whatever you want), call the changeUser method in appService home.ts:

//See the full code in example
this.appService.changeUser(+userId);

这篇关于如何在ionic2/3中创建动态侧边导航菜单和子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！