javascript - 在 Angular component.ts 中动态创建 JS 类

Question

我需要根据我的 .ts 文件中传递的名称动态创建新的 JS 类。例如，我需要创建名为“CloseIcon”的类。我按下按钮“关闭图标”并将字符串作为参数“CloseIcon”传递，并且必须创建下一个类实例“CloseIcon”。

在 HTML 中：

    <ion-col class="text-center">
      <ion-button class="icons ion-align-items-center" (click)="addCloseIcon()">
        <ion-img src="../../../../assets/images/svg/Cancel3.svg"></ion-img>
      </ion-button>
    </ion-col>

在toolbar.ts 组件中：

  addCloseIcon(): void {
    this.storyboardService.iconToolbarClicked(ContentType.ClOSEICON);
  }

在具有行为主体的全球服务中：

  public iconToolbarClicked(type: string): void {
    this.iconToolbarSubject$.next(type);
  }

在 card.ts 组件中：

    this.iconToolbarSubscription = this.storyboardService
        .iconToolbarSubject$
        .subscribe(
            item => {
              console.log(item);
              this.tabs[this.currentTabIndex].content.push(new item(this.contentTypes[item]));
            }
        );

工具栏和卡片组件通过全局服务相互绑定。

我也有不同型号的文件，例如：

export class Title extends Content {
  constructor(type: ContentType) {
    super(type);
  }
}

export class Authorbox extends Content {
  constructor(type: ContentType) {
    super(type);
  }
}

export class CloseIcon extends Content {
  constructor(type: ContentType) {
    super(type);
  }
}

所以动态生成 JS 类的目的取决于我点击了哪个按钮。在 card.ts 组件中，我得到“项目”（类名），我想用它代替真正的类名。

标签： javascriptangular