8

我想在 ionic 2 应用程序中创建一个侧边菜单，其中页面导航组件放置在借助 menuService.getMenu 函数获取的外部 json 文件中。

我的 JSON 结构：

"menu":[
        {
          "title":"Grid",
          "component":"GridPage"
        }
      ]

我的TS：

    this.menuService.getMenu().then((menu) => {
    this.menu = menu;
    });

    openPage(menu) {
      console.log("menu", menu.component);
      nav.setRoot(menu.component);
    }

控制台日志打印字符串 GridPage。我尝试使用 Type as Type(menu.component) 进行转换。但是我在控制台中的结果是一个匿名名称的函数。有人请帮助我将 json 字符串转换为组件“类型”以便导航工作。

4

2 回答 2

12

我想有一种方法可以通过字符串获取类的类型，但我不知道（我不使用 TS）。一个简单的解决方法是

创建从字符串到类型的映射

classes = {
  'MyClass1': MyClass1,
  'MyClass2': MyClass2,
  'Grid': Grid
}

然后查找类型

class['Grid']

缺点是需要提前知道所有支持的类。

于 2016-02-12T09:08:59.353 回答
6

我不深入了解 Angular 2，但在结构良好的应用程序中，如果您知道给定类型的完全限定名称，则使用字符串获取类型是简单可行的：

let typeName = "GridPage";
let ComponentType = MyApp.Components[typeName];

如果您收到以下类型错误：

对象类型的索引签名隐含地具有“任何”类型。

...那么您将需要输入前面的命名空间（对象）。在这种情况下，我更喜欢断言any，因为它比为基于字符串的索引签名定义内联接口更短，并且您实际上不会失去任何类型安全性：

let ComponentType = (MyApp.Components as any)[typeName];

此外，这种方法也适用于模块：

import * as Components from "./components";

let ComponentType = (Components as any)[typeName];
于 2016-02-12T09:33:07.803 回答