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！

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

2 个答案: