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

Question

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

{
  "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
    }
  ]
}

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

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

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

2.这里允许菜单是菜单内容，IsVisibleAsMenu意味着我们显示菜单然后真其他明智的假

Answer 1

这是一个工作示例

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

其次，在显示应用中的菜单：
应用.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;
}

实际上，每当您更改用户(通过登录或任何您想要的方式(时，都可以调用 changeUser 方法appService首页：

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

Answer 2

我不是离子人，所以不知道离子方式，但我以角度的方式完成了这项工作。它可能会帮助您了解它的要点。您可以有一个名为 path 的附加字段，而不是具有组件名称的响应，该字段将像这样定义路由。

路径："/主页">

因此，当用户单击该项目时，您可以编写登录名以路由到提到的路径。

对于您的第二个问题，您可以参考此处