javascript-innerHTML不适用于某些标签,例如按钮或自定义标签

这个问题已经在这里有了答案：            >            Angular HTML binding                                    18个
当我通过角度插值分配一些html标签(如按钮)或自定义标签时插值出现问题,但未显示

在component.html文件中

< div [innerHTML] =“ html”>< / div>

在component.ts文件中

html =“< h1>页眉< / h1>< button>按钮< / button>”

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

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

解决方法:

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";
}