1

我的项目中有 4 个角度元素（Web 组件）。我在 index.html 中为这些 Web 组件添加了脚本标记，<script src="web-angular-element.js"> </script>我想在我的 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"并且基于我试图呈现组件的代码

4

1 回答 1

0

您应该绑定ngTemplateOutlet到一个TemplateRef.

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

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;
  }
}
于 2019-07-15T19:06:28.290 回答