將字符串轉換為類打字稿/角度

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：

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

希望這可以幫助。 青！