如何在Angular 4组件的TypeScript文件中嵌入Gist脚本？

没问题！我帮你搞定在Angular 4组件里嵌入Gist脚本的事儿，不用把所有脚本都堆在index.html里~

Angular确实会过滤组件模板里的<script>标签，所以咱们得换个思路——在组件的TypeScript代码里动态创建并插入脚本标签，这样就能精准控制每个组件加载对应的Gist了。

具体实现步骤 #

1. 在组件类中添加动态加载脚本的方法 #

在你需要嵌入Gist的组件的.ts文件里，写一个专门加载Gist脚本的函数：

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {

  constructor(private elRef: ElementRef) { }

  ngOnInit(): void {
    // 传入你的Gist脚本地址
    this.loadGistScript('https://gist.github.com/Slugpotato/bce9877d9c38d7415960e18fadc4efd7.js');
  }

  private loadGistScript(gistUrl: string): void {
    // 创建script标签
    const script = document.createElement('script');
    script.src = gistUrl;
    script.async = true;

    // 把脚本插入到组件的宿主元素里（避免污染全局DOM）
    this.elRef.nativeElement.appendChild(script);
  }

}

2. （可选）在模板里指定显示位置 #

如果你希望Gist内容固定显示在某个区域，可以在组件的.html模板里加一个容器：

<!-- 给Gist预留的容器，方便样式控制 -->
<div class="gist-display-area"></div>

然后修改loadGistScript方法，把脚本插入到这个容器中：

private loadGistScript(gistUrl: string): void {
  const script = document.createElement('script');
  script.src = gistUrl;
  script.async = true;

  // 获取模板里的容器元素，插入脚本
  const displayArea = this.elRef.nativeElement.querySelector('.gist-display-area');
  if (displayArea) {
    displayArea.appendChild(script);
  }
}

3. 实用小细节 #

• 避免重复加载：如果组件可能被多次实例化，可以加个判断，防止重复插入相同脚本：

  private loadGistScript(gistUrl: string): void {
    // 先检查页面里是否已经加载过该脚本
    if (document.querySelector(`script[src="${gistUrl}"]`)) {
      return;
    }
    // 后续创建插入逻辑不变
  }
  

• 样式适配：Gist自带的样式可能和你的项目冲突，你可以在组件的.css文件里写自定义样式覆盖，比如调整宽度、字体等。

这样就能在每个组件里独立加载对应的Gist脚本，不用全堆在index.html里啦！

内容的提问来源于stack exchange，提问作者TheSlugDev