如何在 Angular 模板中嵌入 GitHub 要点？

Question

Angular 忽略其模板中的 script 标签，但它们是加载 GitHub 要点所必需的。这样做的最佳做法是什么？使用 iframe？动态创建 script 标签？还是别的？

Answer 1

使用 angular-gist or ngx-gist 嵌入 GitHub 要点。

angular-要点：

安装：

npm install angular-gist --save

作为模块使用：

angular.module('myApp', ['gist']);

指令用法：

<gist id="1234556"></gist>

ngx-要点：

安装：

npm i --save ngx-gist

用法：

import { NgxGistModule } from 'ngx-gist/dist/ngx-gist.module';

@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgxGistModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

您自己的实施：

check out how you can use an iframe for this

Answer 2

一种方法是创建一个 iframe，其中包含 script，并在您希望要点出现时附加它（基于 jasonhodges 解决方案）。

模板

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

Answer 3

我曾多次使用 angular-gist-embed 现在使用 Bower 来实现此目的。

像这样安装即可：bower install angular-gist-embed
然后加上：angular.module('myModule',['gist-embed'])

我使用特定的 GitHub Gist 的 id 来嵌入它：

<code data-gist-id="5457595"></code>

您可以找到更多示例 here。

如何在 Angular 模板中嵌入 GitHub 要点？

How to embed a GitHub gist in the Angular template?

javascript

gist

github

embedding

angular

angular-要点：

ngx-要点：

您自己的实施：

模板

组件