innerHTML 不适用于某些标签，如按钮或自定义标签 [重复]答案

【问题标题】：innerHTML is not working for some tags like button or custom tags [duplicate]innerHTML 不适用于某些标签，如按钮或自定义标签 [重复]
【发布时间】：2018-07-30 11:16:24
【问题描述】：

当我通过角度插值分配一些 html 标签（如按钮）或自定义标签时插值问题，然后它没有显示

在component.html文件中

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

在component.ts文件中

html = "<h1>Header</h1> <button>Button</button>"

不工作在角度 https://stackblitz.com/edit/angular-j5gsb4?embed=1&file=app/app.component.ts

它在纯 html/js 中工作 https://plnkr.co/edit/3PWexJjKbOEe50egKjqJ?p=preview

【问题讨论】：

在链接的问题中，请参阅我在 stackoverflow.com/a/41089093/217408 的回答，该回答演示了消毒剂。

标签： javascript html angular

【解决方案1】：

innerHTML 不是作为 HTML 元素的属性公开的属性。

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

所以这行不通。

您可以使用@ViewChild 访问 DOM 元素

app.component.html

<div #someVar></div>

app.component.ts

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor() {}

ngAfterViewInit() {
      this.el.nativeElement.innerHTML = "some html";
}

【讨论】：

为什么它适用于<p><h1> tags？
@AkshayGarg 它不适用于p 或h1 标签。您正在做的是<h1>Header</h1>，它与<h1 innerHTML="somthing"></h1> 完全不同。前一个是您在 DOM 中设置的字符串。所以它会正常工作。
不不，我的问题是当我分配 html = <h1>Header</h1><button>Button</button> 时，h1 工作正常，但按钮不工作
这个答案没有任何意义。
innerHTML is 作为 HTML 元素的属性公开（甚至您的代码 nativeElement.innerHTML = ... 也证明了这一点）。建议直接 DOM 访问而不是 Angular 视图绑定是违反 Angular 团队的建议的。

【解决方案2】：

默认情况下，Angular 会清理潜在的不安全内容。你可以告诉 Angular 信任你的内容

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent  {
  constructor(private sanitizer:DomSanitizer){
    this.html = sanitizer.bypassSecurityTrustHtml("<h1>Header</h1><button>Button</button>");
  }
  html;
}

StackBlitz example

另见https://stackoverflow.com/a/41089093/217408

【讨论】：