ng-container 的内部 HTML，Angular 4？答案

【问题标题】：Inner HTML of ng-container, Angular 4?ng-container 的内部 HTML，Angular 4？
【发布时间】：2018-02-18 10:17:12
【问题描述】：

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

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

Angular 说 innerHTML 不是 ng-container 的有效属性
我不想使用如下第三个 html 标签：

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

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

【问题讨论】：

<ng-template ... 呢？
我测试过，还是一样的错误
没有任何视觉效果，接受innerHTML
在 div 上使用 [outerHTML] 会被替换
@MichaelWestcott ERROR DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node

标签： html angular

【解决方案1】：

[outerHTML]

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

你的情况

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

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

【讨论】：

我在使用这种方法时遇到了问题。我这样做了：<div *ngFor="let html of contents" [outerHTML]="html"></div> 并且每次contents 更改时，Angular 都没有从页面中删除之前添加的 HTML 标签，而是添加了越来越多的标签东西到页面。解决方案是将ngFor 与outerHTML 分开，如下所示：<div *ngFor="let html of contents"><div [outerHTML]="html"></div></div>
因为ERROR DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node 而对我不起作用。

【解决方案2】：

你可以使用 ngTemplate：

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

【讨论】：

不，这正是所要求的。 div 只是一些示例内容。我非常喜欢这个解决方案！
解决方案很好，但我同意@eugensunic，您仍在使用额外的div。如果您只想渲染 html 内容（[innerHTML] 而不需要任何额外的 html 怎么办？听起来有点棘手，因为无法将 ng-container 与 innerHtml 一起使用

【解决方案3】：

** 请阅读 cmets。这个答案可能是错误的。不知道，没再看**

ng-container 不会被渲染为 html，它只是一个 structural directive。

Angular 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将其放入 DOM 中。

所以没有元素可以放入 html。您需要使用子 div。如果您认为不需要 sub-div，那么您很可能也可以将 ng-container 替换为 div 本身，而根本不使用容器。

【讨论】：

我不明白这是如何回答问题的，因为您建议添加 s sub-div ...
@eugen_sunic 是的，我也解释了原因。 ng-container 不能没有有一个 innerHTML 属性，因为它不是 DOM 的一部分。您需要使用另一个元素，例如 div。
是的，但是你有一个额外的 div 或任何其他 html 元素可以访问包含/包围你不想要的 html 的 innerHTML 属性...
@Blauhirn 不！ ng-container 的全部目的就是把东西化为乌有，否则它为什么会存在呢？这个 sn-p:<ng-container>something into nothing</ng-container> 将文本添加到您的页面中，而不包含任何包含 html 元素的内容，但是如果您想更改或隐藏它，Angular 仍然可以跟踪它。所以你没有理由不能制作某种允许<ng-container [innerHTML]="something into nothing"></ng-container>的模板出口（如ng-container）。
它应该可以工作。内部 HTML 或使用 angular 属性的内部 HTML 在其他任何地方都是相同的 - 为什么 ng-container 应该是一个例外？

【解决方案4】：

如果出于任何原因您需要替换 DOM 元素，您可以使用带有 id 的 div，然后使用 @ViewChild 装饰器和 ElementRef 来访问来自控制器的 nativeElement 并设置 outerHtml 属性。

app.component.tml

<div #iconButton></div>

app.component.ts

import { Component, ViewChild, ElementRef, ViewEncapsulation, AfterViewInit }from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  implements AfterViewInit{
   @ViewChild('iconButton')
    iconButton: ElementRef;

    ngAfterViewInit(){
      this.iconButton.nativeElement.outerHTML = '<button>My button</button>'
    }
}

我们需要使用none作为封装策略，因为我们的模板只包含要替换的div。

Stackblitz 示例：https://stackblitz.com/edit/angular-fa1zwp

【讨论】：