尝试呈现按钮控件时，Angular innerHTML 属性不起作用

Question

我在这里创建了 angular application.in，我想使用 [innerHTML] 属性注入一些内容，如下所示

export class AppComponent  {
  name = 'Angular';
  public bar = 'bars';
  foo = `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}

我在 html 文件中使用了这个，如下所示

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

但我只是简单地只返回 div 元素。按钮控件未呈现。

我已经创建了一个 stackb 示例供您参考。请提供任何想法如何做到这一点

示例 - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts

参考 - Angular HTML 绑定

Answer 1

你应该使用DomSanitizer

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`);
}