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

2024-05-11

角度忽略script其模板中包含标签,但加载 GitHub gist 需要它们。执行此操作的最佳做​​法是什么?使用iframe?创造script动态标记?或者是其他东西?


一种方法是创建一个iframe with script里面并在你希望你的要点出现时附加它(基于杰森·霍奇斯 https://github.com/jasonhodges/ngx-gist/blob/master/lib/ngx-gist.ts解决方案)。

Template

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

成分

@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();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 模板中嵌入 GitHub gist? 的相关文章

随机推荐