Mat-table的MatSort QueryList changes为何首次加载不触发？触发条件是什么？

这是个很常见的Angular视图查询相关的疑问，我来帮你拆解清楚：

为什么首次加载时changes不触发？ #

Angular的QueryList.changes observable只会在QueryList的内容发生「变更」（比如新增、移除、顺序变化）时才会发送通知。而首次初始化时，QueryList是直接被赋值为匹配到的元素集合——这个过程属于「初始设置」，不是后续的「变更操作」，所以不会触发changes事件。

你在ngAfterViewInit里订阅的时候，QueryList已经完成了首次的查询和赋值，自然就收不到首次加载的通知了。

页面刷新后为何会触发？ #

刷新页面后组件会重新初始化，但触发changes通常是因为以下几种场景：

• 你的mydataDataSource可能是异步加载的，刷新后数据加载完成导致表格行/结构动态变化，间接触发了MatSort实例的变更；
• 模板中存在条件渲染（比如*ngIf），导致MatSort所在的表格在ngAfterViewInit之后才被渲染到DOM中，这时候QueryList捕获到新增的MatSort实例，就会触发changes；
• 如果你的组件涉及路由复用、状态重置等操作，也可能导致QueryList的内容被重新设置，进而触发变更通知。

QueryList.changes到底由什么触发？ #

简单来说，只要QueryList匹配到的元素集合发生以下任何一种变化，就会触发changes：

• 新增元素：模板中新增了匹配@ViewChildren选择器的元素（比如*ngIf从隐藏变为显示，或者动态添加组件）；
• 移除元素：匹配的元素被从DOM中移除；
• 顺序变化：匹配元素的DOM顺序发生改变；
• 引用变化：匹配的元素实例被替换（比如组件实例被重新创建）。

针对你的MatSort场景，最常见的触发情况就是表格被条件渲染控制，或者数据源动态变化导致表格结构调整，间接影响了MatSort指令的实例。

小建议：如何让首次加载也执行你的排序函数？ #

如果想在首次加载时就执行sortMyDataMySpecialFunction()，可以在ngAfterViewInit里直接调用一次，再订阅后续的变更：

ngAfterViewInit(): void {
  // 首次加载直接执行一次
  this.sortMyDataMySpecialFunction();
  // 订阅后续的变更通知
  this.myDataSortReference.changes.pipe(takeUntil(this.destroyed$)).subscribe(() => {
    this.sortMyDataMySpecialFunction();
  });
}

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