如何在Angular 2中将"String"值转换为"Type"

Question

我想在离子2应用程序中创建一个侧面菜单,其中页面导航组件放在一个外部json文件中,该文件是在menuService.getMenu函数的帮助下获取的.

MY 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作为Type(menu.component)进行转换.但我在控制台中的结果是一个具有匿名名称的函数.有人请帮助我将json字符串转换为组件"Type"以便导航工作.

Answer 1

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

从字符串到类型创建一个映射

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

然后只看一下类型

class['Grid']

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

Answer 2

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

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

如果出现以下类型错误：

对象类型的索引签名隐式具有“ any”类型。

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

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

此外，此方法还可以与模块完美配合：

import * as Components from "./components";

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