Question

当我通过角度插值分配一些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

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

Answer 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

innerHTML不适用于某些标签，如按钮或自定义标签

2 个答案: