将字符串转换为类打字稿/角度答案

【问题标题】：Convert string to class typescript/angular将字符串转换为类打字稿/角度
【发布时间】：2019-11-12 09:54:22
【问题描述】：

我有一个模态弹出组件。它将字符串作为输入，然后动态加载其他组件。这样我就可以拥有一个模态弹出组件，而不是为我在应用程序中需要的每个模态复制一个模态弹出代码。问题是这会导致一个很大的 if/else 语句，我在其中根据字符串输入加载适当的组件

if (this.data.component == "ContactStaffComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(ContactStaffComponent);
else if (this.data.component == "DocketComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(DocketComponent);
else if (this.data.component == "FilingComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(FilingComponent);
else if (this.data.component == "ServiceListRecordComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(ServiceListRecordComponent);
else { }

有没有办法将字符串转换为类型？类似于 .net 反射的东西？

【问题讨论】：

可以使用工厂设计模式。您可以使用字符串值从该工厂返回组件。

标签： angular typescript angular7

【解决方案1】：

你可以用你的组件创建一个对象

private modals = {
    ContactStaffComponent: ContactStaffComponent,
    DocketComponent: DocketComponent
};

然后根据输入的字符串就可以获取到组件并将其传递给组件解析器

let component = this.modals[this.data.component];
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

通过这种方式，您可以消除较大的 if/else 代码块。希望对您有所帮助

【讨论】：

是的，我见过类似的东西。如果没有更多的进展出现，那就是 B 计划。谢谢！

【解决方案2】：

为了让代码更简洁，可以这样声明一个Observable of Components：

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

...

export class ... {
  componentList$ = of(
    ContactStaffComponent,
    DocketComponent,
    FilingComponent,
    ServiceListRecordComponent
  );
  ...
}

您可以通过访问 componentList$ 中的 .name 属性来获取组件的名称。并按如下方式过滤componentList$。

this.componentList$.pipe(
  filter(component => this.data.component == component.name.toString()))
  .subscribe((componentName: any) =>{
    componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);
  });

希望这会有所帮助。赛亚！

【讨论】：