在Angular CLI项目中导入jQuery插件tipsy的配置疑问

嘿，我来帮你捋清楚这个集成的问题～首先先说说你当前配置里的小问题，再一步步走完后续的集成流程：

一、先修正你的angular-cli.json配置 #

你写的路径有个小错误：angular-cli.json本身就在项目根目录，而node_modules也和它同级，所以不需要用../（这会跳转到项目的父目录，大概率找不到文件）。正确的配置应该是：

"styles": [
  "assets/styles/custom.scss",
  "./node_modules/tipsy/src/stylesheets/tipsy.css",
  "./node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/tipsy/src/javascripts/jquery.tipsy.js"
]

另外注意你scripts里的末尾有个省略号，记得删掉哦，不然会导致配置解析失败。

二、后续集成步骤 #

1. 让TypeScript识别jQuery #

Angular基于TypeScript，默认不认识$或jQuery，所以得先声明全局变量，避免编译报错。有两种简单方式：

• 方式一：手动声明类型
  在src目录下新建一个typings.d.ts文件（如果已经有就直接加），写入：

  declare var $: any;
  declare var jQuery: any;
  

• 方式二：安装官方类型定义
  执行命令安装jQuery的TypeScript类型声明：

  npm install @types/jquery --save-dev
  

  然后打开tsconfig.json，在compilerOptions里添加：

  "types": ["jquery"]
  

2. 在组件中初始化Tipsy #

Tipsy是基于DOM的插件，所以必须等DOM渲染完成后再初始化，我们用ngAfterViewInit钩子来做这件事：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 给需要提示的元素绑定tipsy，这里假设元素有class="tipsy-target"
    $('.tipsy-target').tipsy({
      gravity: 's', // 提示框位置：south表示下方，可选n/e/s/w等
      fade: true, // 开启淡入淡出效果
      delayIn: 500 // 鼠标hover后延迟500ms显示
    });
  }
}

对应的模板里可以这样写元素：

<a href="#" class="tipsy-target" title="这是Tipsy的悬浮提示">悬停我看提示</a>

3. 重启服务验证 #

因为修改了angular-cli.json，必须重启Angular开发服务器才能生效：

ng serve

之后打开页面，悬停你绑定的元素，就能看到Tipsy的提示框啦～

常见问题排查 #

• 报错$ is not defined？检查scripts数组里的jQuery是否在Tipsy之前引入（依赖顺序很重要），同时确认路径正确。
• 样式不显示？检查styles数组里的tipsy.css路径，或者可以直接把css内容复制到你的custom.scss里测试。
• 提示框不触发？确保是在ngAfterViewInit里调用的初始化，ngOnInit时DOM还没渲染完成，插件找不到元素。

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