Question

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

{
  "Name": "Steve",
  "Id": 37,
  "email": "steve@hotmail.com",
  "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 case，提及每个组件，如果情况正确，那么它将转到该特定页面。以下是我的问题

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

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

2.其中AllowedMenu是菜单内容，IsVisibleAsMenu表示我们显示菜单然后是真正的其他明智的假

Answer 1

这是working example

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

Answer 2

我不是一个离子家伙因此不知道离子的方式，但我已经采取了有角度的方式。它可能会帮助您获得它的要点。您可以拥有一个名为path的附加字段，而不是具有组件名称的响应，该字段的路由定义如下。

路径：＆＃39; / home＆＃39;

因此，当用户点击该项目时，您可以编写登录信息以路由到上述路径。

关于第二个问题，您可以参考here

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

2 个答案: