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>

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

我创建了一个 stackb 示例供您参考。请提供任何想法如何去做

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

参考 -

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>
`);
}

Answer 2

可以改成@ViewChild,

像这样更改您的 ts 文件，

export class AppComponent  {
  @ViewChild('someVar') el:ElementRef;
  name = 'Angular';
  public bar = 'bar';
  ngAfterViewInit() {
  this.el.nativeElement.innerHTML = `<div>`+this.bar+`
  </div><button type="button" onclick="alert('Hello world!')">Click Me!</button>`;
}
}

工作 Stackblitz https://stackblitz.com/edit/angular-vnk9ft

Angular innerHTML 属性尝试呈现按钮控件时无法正常工作

Angular innerHTML property not working while try to render button control

html

css

innerhtml

angular

Angular innerHTML 属性 尝试呈现按钮控件时无法正常工作

Angular innerHTML property not working while try to render button control

html

css

innerhtml

angular

Angular innerHTML 属性尝试呈现按钮控件时无法正常工作