在Ionic Angular项目中正确集成Bootstrap Table的方法咨询

1. jQuery是否必需？ #

是的，Bootstrap Table是基于jQuery开发的插件，它的所有核心功能都依赖jQuery的DOM操作与事件系统，完全无法脱离jQuery运行，所以必须引入。

2. 如何正确导入Bootstrap脚本？ #

严格按照以下步骤操作，注意脚本加载顺序（jQuery必须最先加载）：

• 安装所有依赖包：

  npm install jquery bootstrap bootstrap-table @types/jquery --save
  

• 修改angular.json，在build -> options -> scripts数组中按顺序添加脚本路径：

  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/bootstrap-table/dist/bootstrap-table.min.js"
  ]
  

• 导入样式文件：在src/global.scss中添加：

  @import "~bootstrap/dist/css/bootstrap.min.css";
  @import "~bootstrap-table/dist/bootstrap-table.min.css";
  

• 解决TypeScript类型报错：若项目没有src/typings.d.ts则新建文件，添加内容：

  declare var $: any;
  

3. 如何正确执行bootstrapTable()函数？ #

核心要在DOM完全渲染完成后调用方法，避免元素未挂载或方法未初始化的问题：

• 在组件中使用ngAfterViewInit生命周期钩子（禁止用ngOnInit，此时DOM还未生成）：

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-table-demo',
    templateUrl: './table-demo.component.html',
    styleUrls: ['./table-demo.component.scss']
  })
  export class TableDemoComponent implements AfterViewInit {
  
    ngAfterViewInit(): void {
      // 使用jQuery调用bootstrapTable
      $('#demo-table').bootstrapTable({
        columns: [{
          field: 'id',
          title: 'ID'
        }, {
          field: 'title',
          title: '标题'
        }],
        data: [{
          id: 1,
          title: '测试数据1'
        }, {
          id: 2,
          title: '测试数据2'
        }]
      });
    }
  }
  

• 组件模板中添加表格元素：

  <table id="demo-table"></table>
  

• 若仍出现Cannot access uninitialized variable报错，检查angular.json中的脚本顺序是否正确（jQuery必须在最前），且不要在组件内提前声明$变量，依赖全局声明即可。

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