Angular5中如何为特定组件引入专属版本的jQuery及插件？

嘿，这个场景我太熟悉了——项目里全局用着高版本的jQuery和Select2，但某个组件偏要依赖老版本，确实容易踩冲突的坑。别担心，咱们可以通过隔离加载的方式完美解决，下面是一步步的实操方案：

1. 先把需要的特定版本装到项目里 #

首先用npm把jquery@2.2.x和select2@3.5.4安装到项目依赖中，和全局的版本分开存放：

npm install jquery@2.2.x select2@3.5.4 --save

2. 在目标组件内动态加载并隔离资源 #

核心思路是：不在全局引入这些老版本，而是只在目标组件初始化时动态加载，并且用noConflict把老版本的jQuery和全局的高版本隔离开，避免污染全局变量。

在你的组件.ts文件里这么写：

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

@Component({
  selector: 'app-special-component',
  templateUrl: './special-component.component.html',
  styleUrls: ['./special-component.component.css']
})
export class SpecialComponentComponent implements OnInit, OnDestroy {
  // 用局部变量保存老版本的jQuery，不和全局$冲突
  private localJquery: any;
  // 保存全局原始的jQuery，组件销毁后可以恢复
  private originalGlobalJquery: any;

  ngOnInit(): void {
    // 先把全局的jQuery存起来，后面好恢复
    this.originalGlobalJquery = window['jQuery'];

    // 第一步：动态加载jquery 2.2.x
    const jqueryScript = document.createElement('script');
    jqueryScript.src = 'node_modules/jquery/dist/jquery.min.js';
    jqueryScript.onload = () => {
      // 用noConflict(true)把当前加载的老版本jQuery从全局剥离，存到局部变量里
      this.localJquery = window['jQuery'].noConflict(true);

      // 第二步：加载select2 3.5.4的样式文件
      const select2Css = document.createElement('link');
      select2Css.rel = 'stylesheet';
      select2Css.href = 'node_modules/select2/dist/css/select2.min.css';
      document.head.appendChild(select2Css);

      // 第三步：加载select2 3.5.4的脚本
      const select2Script = document.createElement('script');
      select2Script.src = 'node_modules/select2/dist/js/select2.min.js';
      select2Script.onload = () => {
        // 用局部的老版本jQuery初始化Select2
        this.localJquery('.special-select').select2();
        // 这里也可以加载你的专属插件，同样用this.localJquery来调用
        // 比如：this.localJquery('.your-element').yourPlugin();
      };
      document.body.appendChild(select2Script);
    };
    document.body.appendChild(jqueryScript);
  }

  ngOnDestroy(): void {
    // 组件销毁时，先销毁Select2实例，避免内存泄漏
    if (this.localJquery) {
      this.localJquery('.special-select').select2('destroy');
    }

    // 移除动态添加的脚本和样式
    const scripts = document.querySelectorAll('script[src*="jquery.min.js"], script[src*="select2.min.js"]');
    scripts.forEach(script => script.remove());
    const styles = document.querySelectorAll('link[href*="select2.min.css"]');
    styles.forEach(style => style.remove());

    // 恢复全局的jQuery，保证其他组件不受影响
    window['jQuery'] = window['$'] = this.originalGlobalJquery;
  }
}

3. 组件模板里正常使用 #

在组件的HTML模板中，直接写需要初始化Select2的下拉框：

<select class="special-select">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

关键注意点 #

• 你的专属插件一定要用this.localJquery来调用，而不是全局的$，这样才能确保它依赖的是老版本jQuery
• 组件销毁时的清理步骤很重要，不然会留下冗余的脚本/样式，甚至导致内存泄漏
• 测试时记得验证其他组件的全局jQuery和Select2功能是否正常，确保没有被影响

这样操作下来，这个特殊组件就能安心使用指定版本的依赖，完全不会干扰项目里的其他部分啦！

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer