执行受信任的脚本

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 🚀

根据此issue，您不能将脚本标签放在模板，因为围绕它的唯一方法是将其删除是如上所述动态插入脚本标签。