angular - 如何在ionic2/3中创建动态侧边导航菜单和子菜单

Question

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

{
  "Name": "Steve",
  "Id": 37,
  "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e6e1f0e3f0d5fdfae1f8f4fcf9bbf6faf8" rel="noreferrer noopener nofollow">[email protected]</a>",
  "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
    }
  ]
}

使用用户名和密码登录后，我得到了上述响应，我必须构建动态侧面导航。目前，我遵循一种在登录页面中使用开关大小写的方法，我提到了每个组件，如果大小写正确，那么它将进入该特定页面。以下是我的问题

还有其他方法可以获得动态侧面导航吗？登录后根据响应创建侧面导航。

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

2.这里AllowedMenu是菜单内容，IsVisibleAsMenu表示我们要显示菜单，否则为true，否则为false

Answer 1

这是一个working example

首先，您需要一个提供程序来保存您的菜单项。在上面的例子中:
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:

<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:

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