Angular 11中ng-modal表格内mat-sort与paginator不生效问题咨询

该问题的核心是mat-sort、mat-paginator属于需要依赖DOM实际渲染才能通过@ViewChild获取实例的组件，而ng-modal的内容默认是懒加载的，在父组件ngOnInit初始化阶段，模态框内部DOM还未生成，此时查询到的组件实例为空，无法正常绑定到mat-table的数据源上。

方法1：在模态框打开回调中绑定实例 #

ng-modal组件普遍提供了打开完成后的回调钩子，你可以在模态框完全渲染、DOM节点生成后再给数据源绑定sort和paginator。
示例代码：

// 调用模态框打开的逻辑
openTableModal() {
  const modalRef = this.modalService.open(TableModalComponent);
  // 监听模态框打开完成事件
  modalRef.afterOpened().subscribe(() => {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  });
}

如果表格是写在模态框单独的组件内，直接将绑定逻辑放在模态框组件的ngAfterViewInit生命周期钩子中即可。

方法2：调整@ViewChild的static配置 #

Angular 8及以上版本@ViewChild默认static: false，会在每次变更检测后重新查询DOM节点。如果你的代码中手动给@ViewChild配置了static: true，修改为false即可正常获取渲染后的组件实例：

// 不配置默认就是static: false，也可以显式声明
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

方法3：通过setter监听组件实例变化 #

如果你的模态框是通过*ngIf条件渲染的，可以用setter形式声明@ViewChild，只要组件实例生成就自动完成绑定：

private _sort: MatSort;
@ViewChild(MatSort) set sort(value: MatSort) {
  this._sort = value;
  if (this.dataSource && value) {
    this.dataSource.sort = value;
  }
}

private _paginator: MatPaginator;
@ViewChild(MatPaginator) set paginator(value: MatPaginator) {
  this._paginator = value;
  if (this.dataSource && value) {
    this.dataSource.paginator = value;
  }
}

方法4：关闭模态框懒加载 #

如果使用的ng-modal组件支持预加载DOM配置，可以关闭懒加载，让模态框的DOM节点和父组件同时初始化，就能在父组件ngAfterViewInit阶段正常获取到sort和paginator的实例。

注意：如果表格数据是异步请求返回的，需要在数据赋值给dataSource之后再执行sort和paginator的绑定操作，否则也会出现功能失效的问题。

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