将字符串转换为 class typescript/angular

Question

我有一个模态弹出组件。它以字符串作为输入，然后动态加载其他组件。这样我就可以拥有一个模式弹出组件，而不是为我在应用程序中需要的每个模式复制一个模式弹出代码。问题是这会导致一个很大的 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 反射类似的东西？

Answer 1

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

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

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

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

通过这个，你可以消除一个大的if/else代码块。希望这对您有所帮助

Answer 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);
  });

希望这对您有所帮助。 CYA！

将字符串转换为 class typescript/angular

Convert string to class typescript/angular

typescript

angular

angular7