如何在 Angular 模板中嵌入 GitHub gist？

Question

如何在 Angular 模板中嵌入 GitHub gist？

vul*_*ulp 4 javascript gist github embedding angular

Angular 会忽略script其模板中的标签，但需要它们来加载 GitHub gist。执行此操作的最佳做法是什么？使用iframe？script动态创建标签？或者是其他东西？

Answer 1

一种方法是在内部创建一个iframewithscript并在您希望出现要点时附加它（基于jasonhodges解决方案）。

模板

 <iframe #iframe type="text/javascript"></iframe>

Run Code Online (Sandbox Code Playgroud)

成分

@ViewChild('iframe') iframe: ElementRef;

gistUrl: string;

ngAfterViewInit() {
  const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
    const content = `
        <html>
        <head>
          <base target="_parent">
        </head>
        <body>
        <script type="text/javascript" src="${this.gistUrl}"></script>
        </body>
      </html>
    `;
    doc.open();
    doc.write(content);
    doc.close();
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，11 月前
查看次数：	1502 次
最近记录：	7 年，11 月前