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

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

javascript angular github

Javascript 如何在Angular模板中嵌入GitHub gist？,javascript,angular,github,embedding,gist,Javascript,Angular,Github,Embedding,Gist,Angular忽略其模板中的script标记，但它们是加载GitHub gist所必需的。这样做的最佳实践是什么？使用iframe？动态创建script标记？或者其他什么？使用或嵌入GitHub Gist 角度要点：安装： npm install angular-gist --save npm i --save ngx-gist 作为模块使用： angular.module('myApp', ['gist']); 作为指令使用： <gist id="1234556"><

Angular忽略其模板中的

script

标记，但它们是加载GitHub gist所必需的。这样做的最佳实践是什么？使用

iframe

？动态创建

script

标记？或者其他什么？

使用或嵌入GitHub Gist

角度要点：安装：

npm install angular-gist --save

npm i --save ngx-gist

作为模块使用：

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

作为指令使用：

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

用法：

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

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

对于您自己的实现：

一种方法是创建一个包含

脚本的iframe
，并在需要显示要点时附加它（基于解决方案）
模板


组成部分
@ViewChild（'iframe'）iframe:ElementRef；
gistUrl:字符串；
ngAfterViewInit（）{
const doc=this.iframe.nativeElement.contentDocument | | this.iframe.nativeElement.contentElement.contentWindow；
常量内容=`
`;
doc.open（）；
文件编写（内容）；
doc.close（）；
}
我曾多次使用Bower来实现这一点

只需像这样安装：bowerinstall

然后添加它：angular.module（'myModule'，['gist-embed']）


我使用特定GitHub Gist的id来嵌入它：
<code data-gist-id="5457595"></code>

你可以找到更多的例子。

“AngularJS嵌入Github GIST的指令。”我需要一个Angular2+的解决方案，最好没有多余的依赖项。然后查看这些存储库的来源。

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

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