Angular组件模板中jQuery UI函数无法执行及编译错误排查

一、先解决CSS编译报错：找不到ui-icons图片 #

你遇到的这个编译错误，根源是jquery-ui.css里默认引用的图标图片没跟着一起放到assets目录里。它默认从./images/路径找图标，但你只放了CSS文件，没带对应的图片文件夹。解决方法很简单：

• 找到你下载的完整jQuery UI包，把里面的images文件夹整个复制到项目的src/assets/下面，确保路径是src/assets/images/，里面那些ui-icons_xxxxxx_256x240.png之类的图标文件要齐全。
• 要是不想复制图片，也可以手动修改jquery-ui.css里的所有图片引用，把url(./images/...)改成url(./assets/images/...)，不过还是直接复制文件夹更省心，免得改漏了。

二、让Accordion折叠功能正常生效 #

Angular不能像普通HTML那样直接在模板里调用jQuery方法，因为组件DOM渲染有固定顺序，得按Angular的规矩来：

1. 先安装jQuery（没装的话） #

打开终端，在项目根目录执行这个命令：

npm install jquery --save

2. 配置Angular.json加载脚本和样式 #

找到angular.json（老版本是angular-cli.json）里的scripts数组，把jQuery和jQuery UI的路径加进去：

"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./src/assets/jquery-ui.js"
]

再在styles数组里加上jquery-ui.css的路径：

"styles": [
  "./src/styles.css",
  "./src/assets/jquery-ui.css"
]

3. 在组件里正确调用Accordion #

在你的组件.ts文件里，先告诉TypeScript$是全局变量，然后等DOM完全渲染完成后再初始化accordion——也就是用ngAfterViewInit钩子：

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

// 声明jQuery变量，避免TypeScript报错
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 这会儿DOM已经渲染好了，放心调用accordion
    $("#accordion").accordion();
  }
}

4. 模板里的DOM结构要到位 #

你的组件模板里得有符合jQuery UI要求的div结构，比如：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
      purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
      velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
      suscipit faucibus urna.
    </p>
  </div>
</div>

额外提醒 #

• 要是你用的是Angular 8及以上版本，最好在tsconfig.json的types数组里加上jquery，让TypeScript能识别jQuery的类型：

"types": [
  "jquery"
]

• 说句题外话，其实Angular自己的组件库（比如Angular Material的Expansion Panel）就有折叠面板功能，更符合Angular的开发模式，不过如果必须用jQuery UI，上面的步骤肯定能解决你的问题。

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