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代码呢？

Answer 1

你可以使用ngTemplate:

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

没有它正是要求的.div只是一些示例内容.我喜欢这个解决方案! (4认同)
该解决方案很好，但是我同意@eugensunic，您仍在使用额外的div。如果要呈现仅包含html内容（[innerHTML]而没有任何其他html的内容，该怎么办？听起来有些棘手，因为无法将ng-container与innerHtml一起使用 (2认同)

Answer 2

[outerHTML]

将完成替换外部元素的技巧。

就你而言

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

的确，拥有干净的HTML结构对于保持CSS规则尽可能简单非常重要。