angular - 执行可信脚本

Question

这是一个简单的组件示例

export class AppComponent {

  htmlSnippet: string;

  constructor(private sanitizer: DomSanitizer) {
    this.htmlSnippet = this.sanitizer.sanitize(
      SecurityContext.HTML,
      `<p>snippet works!</p><script>alert("ddd");</script>`
    );
  }
}

和模板

<p>app works!</p>

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

所有内容都已呈现。如果有的话，CSS 也能正常工作。

有没有办法执行该警报？

Answer 1

您可以只创建脚本标签并将其附加到组件主体

  constructor(private renderer2: Renderer2, private el: ElementRef) {}

  ngAfterViewInit() {
    let scriptEl = document.createElement("script");
    scriptEl.innerText = "alert('hello')";

    this.renderer2.appendChild(this.el.nativeElement, scriptEl);
  }

demo 🚀

according to this issue you can't put a script tag in the body of the template because it going to be removed the only way around this is to insert the script tag dynamically as above.