angular-gist：

Question

Angular会忽略其模板中的script标签，但需要它们来加载GitHub gist。最佳做法是什么？使用iframe吗？动态创建script标签？还是其他？

Answer 1

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

angular-gist：

安装：

npm install angular-gist --save

用作模块：

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

用作指令：

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

ngx-gist：

安装：

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

我使用angular-gist-embed多次使用Bower来实现这一目标。

只需按照以下方式安装：bower install angular-gist-embed
然后将其添加：angular.module('myModule',['gist-embed'])

我使用特定的GitHub Gist的ID进行嵌入：

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

您可以找到更多示例here。

Answer 3

一种方法是创建一个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();
}

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

3 个答案:

angular-gist：

ngx-gist：

用于您自己的实现：

模板

组件