如何强制Angular组件在其模板中加载外部脚本

Angular默认会过滤组件模板中的<script>标签，所以直接在模板里写<script src="./assets/vendor/bla-bla-bla.min.js"></script>不会生效。下面针对你的场景提供两种可行方案：

方案一：组件内直接动态加载脚本 #

在组件的生命周期钩子（推荐ngAfterViewInit，确保视图已初始化）中手动创建并插入脚本元素，路由进入组件时自动加载，销毁时移除脚本避免内存泄漏。

本地脚本示例 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnDestroy {
  private scriptElement: HTMLScriptElement | null = null;

  constructor(private elRef: ElementRef) { }

  ngAfterViewInit(): void {
    // 创建script元素
    this.scriptElement = document.createElement('script');
    this.scriptElement.src = './assets/vendor/bla-bla-bla.min.js';
    this.scriptElement.type = 'text/javascript';

    // 监听脚本加载完成事件
    this.scriptElement.onload = () => {
      console.log('本地脚本加载完成');
      // 这里可以调用脚本提供的方法
    };

    // 监听加载失败事件
    this.scriptElement.onerror = () => {
      console.error('本地脚本加载失败');
    };

    // 将脚本插入到组件的宿主元素中
    this.elRef.nativeElement.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除脚本
    if (this.scriptElement && this.scriptElement.parentNode) {
      this.scriptElement.parentNode.removeChild(this.scriptElement);
    }
  }
}

CDN脚本示例 #

只需修改src为CDN地址即可：

this.scriptElement.src = 'https://cdn.example.com/bla-bla-bla.min.js';

方案二：封装可复用脚本加载服务 #

如果多个组件需要加载外部脚本，建议封装一个服务来统一管理，避免重复加载同一脚本。

1. 创建脚本加载服务 #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ScriptLoaderService {
  private loadedScripts = new Set<string>();

  loadScript(src: string): Promise<void> {
    return new Promise((resolve, reject) => {
      // 检查脚本是否已加载
      if (this.loadedScripts.has(src)) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.src = src;
      script.type = 'text/javascript';

      script.onload = () => {
        this.loadedScripts.add(src);
        resolve();
      };

      script.onerror = () => {
        reject(new Error(`脚本加载失败: ${src}`));
      };

      document.body.appendChild(script);
    });
  }

  // 移除脚本方法
  removeScript(src: string): void {
    const script = document.querySelector(`script[src="${src}"]`);
    if (script && script.parentNode) {
      script.parentNode.removeChild(script);
      this.loadedScripts.delete(src);
    }
  }
}

2. 在组件中使用服务 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ScriptLoaderService } from '../services/script-loader.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit, OnDestroy {
  private scriptSrc = './assets/vendor/bla-bla-bla.min.js';

  constructor(private scriptLoader: ScriptLoaderService) { }

  ngOnInit(): void {
    this.scriptLoader.loadScript(this.scriptSrc)
      .then(() => {
        console.log('脚本加载完成');
        // 执行脚本相关逻辑
      })
      .catch(err => {
        console.error(err);
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时移除脚本
    this.scriptLoader.removeScript(this.scriptSrc);
  }
}

关键注意事项 #

• 本地脚本路径：确保angular.json的assets配置包含脚本所在目录，比如：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

• 脚本依赖顺序：如果多个脚本有依赖关系，需按顺序加载（可在第一个脚本的onload中加载第二个）。
• 全局变量访问：如果脚本暴露了全局变量，可通过window['globalVarName']访问（Angular中需声明declare var globalVarName: any;避免类型报错）。

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