如何在 ngFor 中添加 angular 元素选择器

Question

我的项目中有 4 个 angular 元素（Web 组件）。我在 index.html <script src="web-angular-element.js"> </script> 中为这些 Web 组件添加了脚本标记，我想在我的 angular 应用程序中动态显示这些元素。我只是使用组件选择器在应用程序中显示它，并且选择器的名称来自基于用户访问的服务，如“”。

<div class="widgets-section" *ngFor="let widgets of userWidget">
    <div class="wt">
        <h3>{{widgets.name}}</h3>
    </div>
    <div class="wb">
        {{widgets.code}}
    </div>
    <div class="wf">
        <button class="button-standard">{{widgets.text}}</button>
    </div>
</div>

这里的小部件代码是 widgets.code = <component-name></component-name> 即使我尝试了 "ngTemplateOutlet"

也无法正常工作

<ng-container *ngTemplateOutlet="widgets.code"></ng-container>

<ng-template #abc>
  <component-name></component-name>
</ng-template>

我在这里传递的小部件代码是 widgets.code = "abc" 并且基于我尝试呈现组件的代码

Answer 1

您应该将 ngTemplateOutlet 绑定到 TemplateRef 变量。

下面这个简单的代码并不是您问题的完整解决方案，但它会为您提供动态组件的解决方案。剩下你要做的就是通过 widget.code.

得到正确的 TemplateRef

HTML:

<ng-container *ngTemplateOutlet="carrentTemplate"></ng-container>

<ng-template #abc>
  <component-name></component-name>
</ng-template>
<ng-template #def>
  <component-name-2></component-name-2>
</ng-template>

TS:

carrentTemplate: TemplateRef<any>;
@ViewChild('abc') abc: TemplateRef<any>;
@ViewChild('def') def: TemplateRef<any>;

ngOnInit() {
  if (true) { // some condition
    this.currentTemplate = this.abc;
  } else  {
    this.currentTemplate = this.def;
  }
}

如何在 ngFor 中添加 angular 元素选择器

How to add angular element selector inside the ngFor

web-component

ngfor

angular

angular-elements

angular7