如何在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
    }
  ]
}

使用用户名和密码登录后，即时通讯会收到上述响应，我必须构建动态侧面导航.目前，我在登录页面中使用了切换用例，它提到了每个组件，如果该用例是正确的，那么它将转到该特定页面.以下是我的问题

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.此处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屋！