Angular 在运行时单击事件时添加角度组件的最佳方法

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

Angular说我应该这样做：

Angular Material说我应该这样做：

我个人也希望这样做（这是可行的），但我不认为这是“最佳实践”：

因此，当用户单击此标记时，将触发append方法：

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

类型脚本文件：

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

constructor() { }

ngOnInit() {}

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

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

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

我的问题: 我在ngFor中使用的方法有什么错误？不是以一种固执己见的方式，而是在技术上。 当用户单击按钮将组件添加到页面时，向DOM添加组件的“最佳做法”是什么？为什么？不是以一种固执己见的方式，而是在技术上或在团队的证据下

我本来打算在代码中展示，但现在我已经找到了角度和角度材料的方法，我正在寻找关于最佳方法的事实

请告知？因为有些人觉得这对于观点来说过于开放，所以保持技术性会有所帮助

如果你需要进一步的描述，请告诉我

谢谢,，

---

Eric

您使用的

*ngFor

语法是标准方法

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

如果您不需要outter

div

，可以使用：

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

</ng-container>

如果您有

，则可以使用

*ngSwitch

，其中switch case将是元素名称-如果需要渲染一些不同的组件，这将非常合适。Angular Docs网站上有一个很好的例子，非常接近你正在做的事情（据我所知）

---

注意：我不确定您为什么需要

ngModel

绑定。更好的做法是从模板中发送事件，更新组件中的绑定

在我看来，for循环是最容易做到这一点的方法。唯一不起作用的情况是，如果您不知道用户可以使用哪些组件，那么您可能需要使用动态组件solution@Xesenix我想我的一个障碍是，我同意这是最简单的，但是有什么原因使它成为一种不好的做法吗？一定有一个原因，与我所写的相反，Angular和Angular Material创建了他们的方法。我知道他们将要添加的每个元素的类型（例如，我为每个动态组件都有一个模型，并且他们只能添加集合类型）在使用这个简单的解决方案大约1,5-2年后，我可以从我的经验中看出，除了将渲染组件与渲染组件的模块耦合之外，我没有看到任何会使它成为反模式的东西。因此，这取决于您需要使用该模式的范围。如果只是在一些地方，我会说处理动态组件的额外工作是不值得的，在其他情况下，例如，当您创建可重用组件时，可能会使用在渲染循环上下文中不知道的组件来处理动态组件。感谢您提供详细的答案！另外，为了指出切换将是一种更好的处理方式……对于ngModel信息……我已经将此标记为正确答案，因为它详细说明了我需要知道的内容……我确实想知道为什么现在Angle材质入口和Angle的动态组件文档之间存在差异。这只是好奇，尽管这帮了大忙。非常感谢。CDK门户和动态组件文档之间的区别在于CDK是一个可选库。它在动态组件等角度功能周围添加了包装，使其更易于使用，这要感谢这种区别。我知道CDK是可选的，因为它是角材料的一部分。我不知道门户是动态组件功能的包装器。