ng-container 的内部 HTML，Angular 4？

Question

我想在我的html代码中动态放置一个html代码，所以我写了下面的代码：

 <ng-container [innerHTML]="buttonIcon"></ng-container>

Angular 说 innerHTML 不是 --- ng-container --- 的有效属性

我不想使用如下的第三个 html 标签：

 <div [innerHTML]="buttonIcon"></div>

那么如何在没有任何标签内部 html 绑定的情况下插入 html 代码呢？

原文由 Mohammad Dayyan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ngTemplate：

 <ng-template #buttonIcon>
    <div> Your html</div>
</ng-template>
<ng-container
   *ngTemplateOutlet="buttonIcon">
</ng-container>

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

[outerHTML]

将取代外部元素。

在你的情况下

<div [outerHTML]="buttonIcon"></div>

的确，拥有一个干净的 HTML 结构很重要，例如保持 CSS 规则尽可能简单。

原文由 Pierre Chavaroche 发布，翻译遵循 CC BY-SA 4.0 许可协议