Angular2中jQuery无法正常工作，环境配置及代码问题求助

嘿，我来帮你排查这个问题！从你的描述来看，之前环境配置成功但在家电脑不行，加上代码里的一些细节，大概率是依赖引入、代码细节或者DOM时机的问题，咱们一步步来解决：

1. 先修正代码里的明显错误 #

你写的 $("\.Editor-editor") 里多了一个不必要的反斜杠，这会导致jQuery无法正确匹配到.Editor-editor类的元素！应该改成 $(".Editor-editor")，这个小错误可能直接导致后续的赋值操作失效。

2. 确保jQuery和编辑器插件正确引入 #

在家电脑的环境可能没正确安装或全局引入依赖：

• 先检查项目根目录的package.json，确认jquery和你用的编辑器包（比如jquery-editor之类的）已经在dependencies里。如果没有，运行：

  npm install jquery --save
  # 同时安装你的编辑器插件，比如如果是jquery-editor的话
  npm install jquery-editor --save
  

• 然后在angular.json（旧版是angular-cli.json）的scripts数组里添加这两个库的路径，确保全局可用：

  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/jquery-editor/dist/jquery.editor.min.js" // 替换成你实际的编辑器JS路径
  ]
  

3. 优化类型声明与导入 #

如果你想更规范地使用jQuery，可以安装官方类型定义，替代手动declare：

npm install @types/jquery --save-dev

然后在组件里直接导入：

import * as $ from 'jquery';

这样就不用再写declare var $ : any;和declare var jquery : any;了，还能获得类型提示。

4. 调整生命周期钩子内的代码逻辑 #

ngAfterViewInit本身就是Angular确保视图DOM已经初始化完成的钩子，不需要再嵌套$(function(){...})（这是jQuery的DOM ready事件），嵌套反而可能导致执行时机不对。修改后的代码：

ngAfterViewInit(){
  const $desc = $('#desc');
  if($desc.length > 0) {
    // 初始化编辑器
    $desc.Editor();
    // 赋值编辑器内容
    $('.Editor-editor').html($desc.text());
    // 同步回原元素
    $desc.val($('.Editor-editor').html());
  }
}

5. 验证DOM元素是否存在 #

最后确认你的add-page.component.html模板里确实存在id="desc"的元素，比如：

<textarea id="desc" rows="5" cols="30"></textarea>

可以在ngAfterViewInit里加个console.log($desc)，看看控制台输出是否能找到这个DOM元素，排除模板里的拼写错误。

按照这些步骤排查下来，应该能解决你遇到的问题啦！

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