Angular 5中JQuery仅部分组件可用，内层组件无法使用求助

我来帮你搞定这个棘手的问题！你遇到的核心原因是Angular组件的隔离性——你在app.component.ts里导入的$只在该组件的作用域内有效，深层组件并没有继承这个变量。下面是几个靠谱的解决方案，按优先级排序：

方案1：全局配置jQuery（推荐） #

这种方式能让所有组件无需单独导入就能直接使用$，最省心：

1. 确认jQuery和类型依赖已安装
   先确保你已经装了jQuery和对应的TypeScript类型定义（Angular 5需要这个才能识别$）：

   npm install jquery --save
   npm install @types/jquery --save-dev
   

2. 在angular-cli.json中全局引入脚本
   找到项目根目录下的angular-cli.json（Angular 5版本用的是这个文件名），打开后找到apps[0].scripts数组，添加jQuery的路径：

   "scripts": [
     "../node_modules/jquery/dist/jquery.min.js"
   ]
   

   注意路径要和你的node_modules位置对应，如果是在项目根目录下就用上面的路径。
3. 声明全局$变量（可选但推荐）
   在项目的src目录下创建或修改typings.d.ts文件，添加以下内容，避免TypeScript报错：

   declare var $: any;
   

   这样所有组件里直接写$()就不会有编译错误了。

方案2：在需要的深层组件中单独导入 #

如果不想全局配置，那每个要使用jQuery的深层组件都得单独导入：
在store-info.component.ts的顶部添加：

import * as $ from 'jquery';

注意：模块（.module.ts）里导入jQuery是没用的，必须在组件的.ts文件里导入，因为组件是独立的作用域。

方案3：确保在正确的生命周期钩子中使用jQuery #

就算导入正确了，如果在组件视图还没初始化的时候调用jQuery，也会找不到DOM元素。所以一定要在ngAfterViewInit钩子里面执行jQuery代码：

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-store-info',
  templateUrl: './store-info.component.html'
})
export class StoreInfoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 在这里写jQuery代码，比如：
    $('.some-element').hide();
  }
}

额外提醒 #

虽然jQuery好用，但Angular本身提供了更符合框架理念的DOM操作方式（比如ViewChild、Renderer2），如果不是必须用jQuery的老代码，建议尽量用Angular原生的方法，避免框架耦合哦。

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