innerHTML不适用于某些标记，如按钮或自定义标记[duplicate]

Question

插值问题当我通过角度插值指定一些html标记（如按钮）或自定义标记时，它不会显示

在组件中。html文件

在组件中。ts文件

html=”

不在有棱角的地方工作https://stackblitz.com/edit/angular-j5gsb4?embed=1

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




Answer 1

默认情况下，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示例

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

Answer 2

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

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

所以这行不通。

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

app.component.html

<div #someVar></div>

应用程序。组成部分ts

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

constructor() {}

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