0

我正在构建的网站有多个组件。在“主页”页面组件上，当用户单击按钮向页面添加内容时，我想将他们选择的组件附加到“主页”组件。我已经研究并发现了 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：

打字稿文件：

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 方式，我正在寻找关于最佳方式的事实。

请指教？由于有些人认为这对意见过于开放，因此保持技术性会有所帮助。

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

谢谢你，埃里克

4

1 回答 1

1

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

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

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

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

</ng-container>

如果您有<div *ngIf="element.name == 'elementOne'">，则可以使用，其中 switch case 将是元素名称 - 如果您需要渲染*ngSwitch几个不同的组件，这将适合。Angular Docs 网站上有一个很好的ngSwitch 示例，这与您正在做的非常接近（据我所知）

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

于 2019-08-18T20:45:28.890 回答