Angular中使用routerLink跳转后bootstrap-table功能失效如何解决？

问题原因 #

全局引入的bootstrap-table JS只会在页面首次加载完成后，扫描当前页面已存在的表格DOM完成初始化。Angular路由跳转属于单页应用(SPA)的局部视图替换，不会触发页面重载，也不会重新执行全局CDN引入的JS脚本，因此新视图里的表格元素没有经过bootstrap-table的初始化逻辑，自然所有功能都失效。F5刷新后全局JS重新执行，就能正常识别页面里的表格元素。

解决步骤 #

• 第一步：确保jQuery的加载顺序早于bootstrap-table，满足依赖要求。
• 第二步：在用到bootstrap-table的组件的ngAfterViewInit生命周期钩子中，手动触发表格的初始化逻辑。示例代码如下：

import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
declare var $: any; // 声明全局jQuery变量

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html'
})
export class UsersComponent implements AfterViewInit, OnDestroy {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    // 组件视图渲染完成后，手动初始化当前组件内的bootstrap-table
    const table = this.el.nativeElement.querySelector('table');
    $(table).bootstrapTable({
      // 此处可传入你的表格自定义配置，和之前写在table属性上的配置一致
      pagination: true,
      search: true
    });
  }

  // 组件销毁时销毁表格实例，避免内存泄漏
  ngOnDestroy(): void {
    const table = this.el.nativeElement.querySelector('table');
    $(table).bootstrapTable('destroy');
  }
}

• 第三步：如果项目多个页面都用到bootstrap-table，可以把初始化逻辑封装成通用属性指令，避免每个组件重复写代码：

import { Directive, ElementRef, AfterViewInit, Input, OnDestroy } from '@angular/core';
declare var $: any;

@Directive({
  selector: '[appBootstrapTable]'
})
export class BootstrapTableDirective implements AfterViewInit, OnDestroy {
  @Input() tableConfig: any = {};
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    $(this.el.nativeElement).bootstrapTable(this.tableConfig);
  }

  ngOnDestroy(): void {
    $(this.el.nativeElement).bootstrapTable('destroy');
  }
}

使用时直接在table标签上加指令即可：

<table appBootstrapTable [tableConfig]="{pagination: true, search: true}">
  <!-- 表格内容 -->
</table>

注意事项 #

不要在ngOnInit钩子中执行初始化逻辑，此时组件DOM还未渲染完成，无法找到对应的表格元素，会导致初始化失败。

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