Angular 4如何仅在单个组件引入外部JS并按需加载？

我来帮你搞定这个问题！你现在用静态import的方式会让外部JS被打包进全局bundle里，所以不管哪个组件都会加载到它。下面给你两种精准的解决方案，分别对应你的两个需求：

这种方式会在组件挂载时动态加载JS，只有当前组件会触发加载，组件销毁时还能清理掉script标签避免内存泄漏。

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

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

  ngOnInit(): void {
    // 动态创建script标签
    this.scriptElement = document.createElement('script');
    this.scriptElement.src = '../assets/extjs.js';
    this.scriptElement.type = 'text/javascript';

    // 可选：监听加载完成事件，确保JS加载后再调用函数
    this.scriptElement.onload = () => {
      console.log('外部JS加载完成');
      // 这里可以直接调用JS中的函数
      (window as any).extfunc();
    };

    // 将script标签添加到页面中
    document.body.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除script标签，避免残留
    if (this.scriptElement && this.scriptElement.parentNode) {
      this.scriptElement.parentNode.removeChild(this.scriptElement);
      this.scriptElement = null;
    }
  }

  myfunction(): void {
    // 调用前先检查函数是否存在
    if ((window as any).extfunc) {
      (window as any).extfunc();
    } else {
      console.error('外部JS尚未加载完成，请稍后再试');
    }
  }
}

关键说明： #

• 利用Angular的ngOnInit钩子在组件初始化时加载JS，ngOnDestroy在组件销毁时清理资源
• 通过(window as any)来访问JS文件中暴露的全局函数（如果你的JS是把函数挂在window上的话）
• 这种方式只有当前组件实例化时才会请求并加载外部JS，其他组件不会受到影响

如果希望更极致的懒加载——只有当用户触发myfunction时才加载JS，而且确保只加载一次，可以用这种异步加载的方式：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  private isScriptLoaded = false;
  private loadScriptPromise: Promise<void> | null = null;

  // 封装加载JS的异步函数，确保只加载一次
  private loadExternalScript(): Promise<void> {
    // 已经加载过，直接返回成功状态
    if (this.isScriptLoaded) {
      return Promise.resolve();
    }
    // 正在加载中，返回同一个Promise避免重复请求
    if (this.loadScriptPromise) {
      return this.loadScriptPromise;
    }

    this.loadScriptPromise = new Promise((resolve, reject) => {
      const scriptElement = document.createElement('script');
      scriptElement.src = '../assets/extjs.js';
      scriptElement.type = 'text/javascript';

      scriptElement.onload = () => {
        this.isScriptLoaded = true;
        this.loadScriptPromise = null;
        resolve();
      };

      scriptElement.onerror = () => {
        this.loadScriptPromise = null;
        reject(new Error('外部JS加载失败'));
      };

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

    return this.loadScriptPromise;
  }

  // 调用函数时才触发加载
  async myfunction(): Promise<void> {
    try {
      // 先等待JS加载完成
      await this.loadExternalScript();
      // 加载成功后调用目标函数
      (window as any).extfunc();
    } catch (error) {
      console.error('调用函数失败:', error);
    }
  }
}

关键说明： #

• 用Promise来管理JS的加载状态，避免重复加载
• 第一次调用myfunction时才会发起JS请求，后续调用直接复用已加载的资源
• 用async/await让异步逻辑更清晰，也能优雅处理加载失败的情况

为什么原来的import不行？ #

你之前用的import * as extjs from '../assets/extjs.js'是静态导入，会被Angular的构建工具（比如Webpack）在编译阶段解析，把这个JS打包进全局的bundle文件中——这意味着不管你的组件有没有被使用，这个JS都会在页面初始化时被加载，所以所有组件都能访问到它。而上面的动态加载方式是运行时加载，只有当代码执行到对应逻辑时才会请求JS文件，完美实现你的需求。

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