typescript 如何在 Angular 2 中将“字符串”值转换为“类型”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35356988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 03:16:54  来源:igfitidea点击:

How to convert a "String" value to "Type" in Angular 2

typescriptangularionic2

提问by AishApp

I want to create a side menu in ionic 2 application where the page navigation component is placed in a external json file fetched with the help of menuService.getMenu function.

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

MY JSON structure:

我的 JSON 结构:

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

My Ts:

我的 Ts:

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

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

Console log prints the string GridPage. I tried to convert using Type as Type(menu.component). But my result in console is a function with anonymous name. Someone please help me on getting the json string converted to component "Type" for navigation to work.

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

回答by Günter Z?chbauer

I guess there is a way to get the type of a class by string but I don't know (I don't use TS). A simple workaround would be to

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

create a map from string to type

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

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

and then just look the types up

然后只需查找类型

class['Grid']

The disadvantage is that you need to know all supported classes in advance.

缺点是您需要提前了解所有支持的类。

回答by John Weisz

I don't know Angular 2 in depth, but in a well structured application it is straightforward and feasible to get a Type using a string, ifyou know the fully qualified name of the given Type:

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

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


If you are getting the following type error:

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

Index signature of object type implicitly has an 'any' type.

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

... then you will need to type cast the preceding namespace (object). I prefer asserting to anyin this case, as it's shorter than defining an inline interface for a string-based index signature, and you effectively don't lose any type-safety:

...然后您将需要对前面的命名空间(对象)进行类型转换。any在这种情况下,我更喜欢断言,因为它比为基于字符串的索引签名定义内联接口更短,并且您实际上不会失去任何类型安全性:

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


Additionally, this approach also works perfectly with modules:

此外,这种方法也适用于模块:

import * as Components from "./components";

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