Ionic 3 Angular 4实现Angular DataTables时$未定义错误求助

嘿，我之前在Ionic 3 + Angular 4的项目里也踩过这个坑！这个错误的核心原因是jQuery没有被全局注入到项目中，Angular的构建环境无法识别$这个全局变量。结合你已经安装的依赖，下面是亲测有效的解决步骤：

1. 确认依赖安装完整 #

你已经执行了基础安装命令，再补全TypeScript类型定义依赖，避免编译报错：

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
# 安装TypeScript类型定义
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

2. 配置angular-cli.json（Ionic 3核心配置文件） #

打开项目根目录下的angular-cli.json，找到scripts和styles数组，把jQuery、DataTables的JS和CSS文件路径加进去：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/datatables.net/js/jquery.dataTables.min.js",
  "../node_modules/datatables.net-dt/js/dataTables.dataTables.min.js"
],
"styles": [
  "../node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
  "styles.css"
]

注意路径要和你的项目结构匹配，如果node_modules在根目录，上面的路径就没问题。

3. 声明全局变量，解决TypeScript报错 #

在项目的src/typings.d.ts文件中添加以下声明（如果没有这个文件，直接新建一个）：

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

这一步是告诉TypeScript，$和jQuery是全局可用的变量，避免编译时出现“找不到$”的错误。

4. 在AppModule中导入DataTables模块 #

打开src/app/app.module.ts，导入并注册DataTablesModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataTablesModule } from 'angular-datatables';
import { MyApp } from './app.component';

@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    DataTablesModule // 注册DataTables模块
  ],
  bootstrap: [MyApp]
})
export class AppModule {}

5. 在组件中正确初始化DataTables #

注意！Ionic页面的生命周期和纯Angular组件不同，不要在ngOnInit里初始化DataTables，而是用ionViewDidLoad（页面DOM加载完成后触发）：

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

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.html'
})
export class YourPageComponent {
  dtOptions: any = {};
  // 模拟你的业务数据
  tableData = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];

  ionViewDidLoad() {
    // 初始化DataTables配置
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      language: {
        search: '搜索:',
        paginate: {
          first: '首页',
          last: '末页',
          next: '下一页',
          previous: '上一页'
        }
      }
    };
  }
}

对应的模板代码（your-page.html）：

<ion-content padding>
  <table datatable [dtOptions]="dtOptions" class="row-border hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of tableData">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</ion-content>

最后检查 #

完成以上步骤后，重启你的Ionic开发服务器（ionic serve），应该就能正常加载DataTables，不会再出现$ is not defined的错误了。

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