在运行时点击事件添加 Angular 组件的最佳方式

Question

我正在构建的网站有多个组件。在 "Home" 页面组件上，当用户单击按钮向页面添加内容时，我想将他们选择的组件附加到 "home" 组件。我已经研究并找到了 3 种方法，但我想知道考虑这种功能的最佳实践是什么。该页面将使用其他用户已添加的一些组件进行初始化。我希望用户能够添加到那里的组件。

Angular 说我应该这样做： https://angular.io/guide/dynamic-component-loader

Angular Material 说我应该这样做： https://material.angular.io/cdk/portal/overview

而且我个人期待这样（有效）但我不认为它是 "best practice":

所以当用户点击这个标签时，它会触发追加方法：

<a class="dropdown-item" href="#!" (click)="prependMedia('elementOne')">ElementOne</a>

该方法在组件的 TS 文件中调用它，有效地将新元素推送到数组。然后列出的 HTML 将监视添加的新元素并将组件放入 ngFor:

TypeScript 文件：

mediaElements: any[] = [];
  element: any = {
    name: 'elementOne',
    data: 'data'
};

constructor() { }

ngOnInit() {}

prependMedia(type: string) {
 console.log(type);
 this.mediaElements.push(this.element);
}

HTML 将组件的新模型添加到 mediaElements 数组后添加组件的文件：

<div *ngFor="let element of mediaElements" [(ngModel)]="mediaElements">
  <div *ngIf="element.name == 'elementOne'">
    <app-elementone></app-elementone>
  </div>
</div>

我的问题：我使用 ngFor 的方法有什么问题？不是固执己见，而是技术上的。当用户单击按钮将其添加到页面时，将组件添加到 DOM 的 "best practice" 方法是什么？为什么？不是以一种自以为是的方式，而是从技术上或 Angular 团队的证据。

我原本打算按照我在代码中显示的方式进行操作，但现在我找到了 Angular 方式和 Angular Material 方式，我正在寻找有关最佳方式的事实。

请指教？由于有些人觉得这对意见太开放了，保持技术性会有所帮助。

如果您需要任何进一步的描述，请告诉我。

谢谢，埃里克

Answer 1

您使用的 *ngFor 语法是标准方法

动态组件更适用于您不知道可能需要哪些组件的情况。这方面的一个例子是模态对话框，其中模态可能必须显示任何类型的组件 - 或者如果您有第三方库显示库用户传入的组件

如果你不需要外层div，你可以使用：

<ng-container *ngFor="let element of mediaElements">

</ng-container>

在您有 <div *ngIf="element.name == 'elementOne'"> 的地方，您可以使用 *ngSwitch，其中 switch case 将是元素名称 - 如果有一些不同你需要渲染的组件。 Angular 文档站点上有一个很好的 ngSwitch example，它与您正在做的非常接近（据我所知）

注意： 我不确定您为什么需要 ngModel 绑定。更好的做法是从模板分派事件，并更新组件中的绑定

在运行时点击事件添加 Angular 组件的最佳方式

Best Way To Add Angular Component At RunTime On Click Event

angular

typescript

angular-material

components

angular-dynamic-components