ColResizeable插件无法适配Angular5项目模态弹窗内的表格列宽调整

问题现象 #

Angular 5项目开发过程中，使用colResizable插件实现表格列宽拖拽调整能力，存在以下特征：

• 普通静态页面中渲染的表格，可正常触发列宽拖拽调整功能
• 模态弹窗内部加载的表格，即使已引入插件全部配套CSS样式，依然无法触发列宽拖拽调整

现有实现逻辑 #

1. 父页面通过Bootstrap模态承载独立Angular表格组件，对应HTML代码：

<div class="modal fade" id="modalShowUser" tabindex="-1" role="dialog" aria-labelledby="modalShowUser">
  <div class="modal-dialog modal-wide" role="document">
    <!-- 独立Angular组件，内部实现表格渲染逻辑 -->
    <app-modal-user [inputUsers]="users"></app-modal-user>
  </div>
</div>

2. 模态承载的表格组件，在视图初始化阶段完成插件挂载，对应TypeScript代码：

ngAfterViewInit(): void {
  $('table').colResizable();
}

失效核心原因 #

该问题是colResizable插件在模态场景下的高频共性问题，已有大量开发者反馈过同类场景异常，触发原因主要有三点：

• 插件本身的运行逻辑要求初始化时必须读取目标表格的实际渲染宽度、各列边界坐标，以此计算拖拽手柄的绑定位置。Bootstrap模态默认初始状态为display: none隐藏状态，此阶段读取到的表格尺寸值为0，插件的位置计算、事件绑定逻辑会全部失效。
• 插件初始化时机与模态可见时机不匹配：在ngAfterViewInit生命周期触发初始化时，模态还处于隐藏状态，完全不满足插件运行的DOM渲染前提。
• 全局选择器$('table')存在匹配偏差风险，未限定组件作用域的全局选择器，可能错误匹配到页面其他位置的表格，没有真正对模态内的目标表格完成插件绑定。

可落地的修复方案 #

• 调整插件初始化时机：移除组件ngAfterViewInit阶段的插件初始化逻辑，改为监听Bootstrap模态的shown.bs.modal事件——该事件会在模态完全打开、过渡动画结束、表格完全可见渲染完成后触发，此时再执行插件初始化，可满足插件对DOM尺寸读取的要求。
• 替换全局选择器为组件内精准查找：通过ElementRef获取当前组件的DOM根节点，在组件作用域内查找目标表格元素，避免全局选择器的匹配偏差。
  调整后的初始化代码示例：

constructor(private elementRef: ElementRef) {}

ngOnInit(): void {
  // 绑定模态完全展示的事件
  $('#modalShowUser').on('shown.bs.modal', () => {
    // 组件作用域内查找目标表格
    const targetTable = this.elementRef.nativeElement.querySelector('table');
    $(targetTable).colResizable();
  });
}

• 模态关闭时可主动调用$('table').colResizable({disable: true})释放插件绑定的事件，避免多次打开模态时出现重复绑定、内存泄漏问题。

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