如何在Angular组件中控制index.html内script标签的显示与隐藏

因为index.html是Angular应用的全局入口文件，无法通过组件的模板语法直接控制其中元素的显示隐藏，所以我们需要把script标签的创建逻辑移到组件内部，通过API返回的配置动态生成或移除它。具体实现步骤如下：

1. 移除index.html中的静态script标签 #

先把你原本放在index.html里的script标签删掉，后续由组件动态生成。

2. 创建专门的组件来管理widget的加载 #

新建一个组件（比如WidgetContainerComponent），在组件里完成API请求、配置判断和script标签的动态操作：

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-widget-container',
  template: '<div #widgetHost></div>',
  standalone: true,
  imports: []
})
export class WidgetContainerComponent implements OnInit, OnDestroy {
  @ViewChild('widgetHost') widgetHost!: ElementRef<HTMLDivElement>;
  private widgetScript?: HTMLScriptElement;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 调用API获取配置
    this.http.get('/api/widget-config').subscribe((config) => {
      // 根据配置中的开关判断是否加载widget
      const shouldLoad = (config as any).enableWidget;
      if (shouldLoad) {
        this.loadWidget();
      } else {
        this.unloadWidget();
      }
    });
  }

  private loadWidget(): void {
    // 避免重复创建script标签
    if (this.widgetScript) return;

    // 创建script元素并设置属性
    this.widgetScript = document.createElement('script');
    this.widgetScript.setAttribute('data-jsd-embedded', '');
    this.widgetScript.setAttribute('data-base-url', '你的实际base-url');
    this.widgetScript.setAttribute('data-key', '你的实际key');
    this.widgetScript.src = 'js-text-sample.js';
    this.widgetScript.type = 'text/javascript';

    // 将script挂载到组件模板的容器中
    this.widgetHost.nativeElement.appendChild(this.widgetScript);
  }

  private unloadWidget(): void {
    // 移除已创建的script标签
    if (this.widgetScript && this.widgetScript.parentNode) {
      this.widgetScript.parentNode.removeChild(this.widgetScript);
      this.widgetScript = undefined;
    }
  }

  // 组件销毁时清理script，避免内存泄漏
  ngOnDestroy(): void {
    this.unloadWidget();
  }
}

3. 在需要展示widget的地方使用该组件 #

比如在你的主页面组件模板（如app.component.html）中添加：

<app-widget-container></app-widget-container>

关键说明 #

• 动态创建script可以让组件完全控制widget的生命周期，包括加载、卸载和销毁清理。
• 加入了重复创建的判断逻辑，避免多次请求API后重复生成script标签。
• 组件销毁时主动移除script标签，防止内存泄漏。

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