Question

我正在构建的网站包含多个组件。在“主页”页面组件上，当用户单击向页面添加某些内容的按钮时，我想将他们选择的组件附加到“主页”组件上。我已经研究并找到了执行此操作的3种方法，但是我想知道考虑此功能的最佳实践是什么。该页面将使用其他用户已经添加的某些组件进行初始化。我希望用户能够在其中添加组件。

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

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

我个人希望这种方式（有效），但是我不认为这是“最佳实践”：

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

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

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

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

我的问题：我在ngFor中使用的方法有什么问题？不是自以为是，而是技术上。当用户单击按钮将组件添加到页面时，将组件添加到DOM的“最佳实践”方法是什么？又为什么呢？不是以一种自以为是的方式，而是在技术上或有Angular团队的证据。

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

请指教？有些人认为这太开放了，因此保持技术性会有所帮助。

请告诉我是否需要进一步的说明。

谢谢你，埃里克

Answer 1

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

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

如果您不需要外部div，则可以使用：

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

</ng-container>

如果有<div *ngIf="element.name == 'elementOne'">，则可以使用*ngSwitch，其中开关大小写为元素名称-如果您有几个不同组件，这将很适合需要渲染。 Angular Docs网站上有一个不错的ngSwitch example，非常接近您的工作（据我所知）

注意：我不确定您为什么需要ngModel绑定。最好从模板中调度事件，并更新组件中的绑定

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

1 个答案: