Ionic2动态导航

时间:2016-09-21 18:01:55

标签: dynamic angular menu navigation ionic2

我正在构建一个数据来自服务器的应用程序。菜单是动态的,服务器可以根据用户配置文件发送不同的菜单。我永远不会知道菜单项将具有什么组件/页面,我只需要提供该组件/页面。

主要问题是我需要进行大量的组件/页面导入,而且我不希望在每个组件/页面中都这样做。

我创建了一个服务,其中进行了所有导入,并且存在一个返回正确组件的方法,因此navController可以导航。

import { Injectable } from '@angular/core';

//Import navigation pages
import { NotificationsPage } from "./../pages/notifications/notifications";
import { ClubPage } from "./../pages/club/club";
import { ActivitiesPage } from "./../pages/activities/activities";
import { NewsPage } from "./../pages/news/news";
import { CalendarPage } from "./../pages/calendar/calendar";
import { NewsletterPage } from "./../pages/newsletter/newsletter";
import { SettingsPage } from "./../pages/settings/settings";
import { FavoritesPage } from "./../pages/favorites/favorites";
import { SubmenuPage } from "./../pages/submenu/submenu";
import { ContentDetailsPage } from "./../pages/contentdetails/contentdetails";

@Injectable()
export class ViewNavigatorService
{
      public NOTIFICATIONS:string = "notifications";
      public CLUB:string = "club";
      public ACTIVITIES:string = "activities";
      public NEWS:string = "news";
      public CALENDAR:string = "calendar";
      public NEWSLETTER:string = "newsletter";
      public SETTINGS:string = "settings";
      public FAVORITS:string = "favorits";

      public SUBMENU:string = "submenu";
      public CONTENT_DETAILS:string = "content-details";

      public GetComponent(page:string, data?:any):any
      {
            let Component = null;

            switch (page) 
            {
                  case this.NOTIFICATIONS:      Component = NotificationsPage;     break;
                  case this.CLUB:               Component = ClubPage;              break;
                  case this.ACTIVITIES:         Component = ActivitiesPage;        break;
                  case this.NEWS:               Component = NewsPage;              break;
                  case this.CALENDAR:           Component = CalendarPage;          break;
                  case this.NEWSLETTER:         Component = NewsletterPage;        break;
                  case this.SETTINGS:           Component = SettingsPage;          break;
                  case this.FAVORITS:           Component = FavoritesPage;         break;
                  case this.SUBMENU:            Component = SubmenuPage;           break;
                  case this.CONTENT_DETAILS:    Component = ContentDetailsPage;    break;

                  default:                      Component = null;                  break;
            }

            return Component;
      }
}

如果我只在父页面中注入服务它可以工作,但如果我也在子页面中注入服务,我会收到此错误:

  

无法解析SubmenuPage的所有参数:(NavController,NavParams,PopoverController,AlertController,ModalController,?)。

?应该是“ViewNavigatorService”。

为什么会出现这种错误?

有更好的方法吗?当您的应用使用动态导航时,您在使用什么?

0 个答案:

没有答案