父传queryParams后，为何ngOnChanges未触发FormGroup更新？

1. 路由订阅仅执行一次 #

父组件中使用take(1)会让路由参数的Observable仅发出一次值就完成订阅，后续路由参数变化无法触发父组件的queryParams更新。

修复：
移除take(1)，改用takeUntil配合组件销毁信号来管理订阅生命周期：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.route.queryParamMap.pipe(takeUntil(this.destroy$)).subscribe(params => {
    const changedQueryParams = {};
    params.keys.forEach((key) => {
      const values = params.getAll(key);
      if (values.length > 0) {
        changedQueryParams[key] = values;
      }
    });
    // 用扩展运算符创建新对象，确保引用变化触发子组件变更检测
    this.queryParams = { ...changedQueryParams };
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

2. ngOnChanges钩子逻辑错误 #

• 拼写错误：changes.isFirsChange 应为 changes.queryParams.isFirstChange()
• 逻辑限制：isFirstChange()仅在输入属性首次赋值时返回true，后续路由参数变化会被忽略
• 参数错误：changes.queryParams是SimpleChange对象，需通过currentValue获取最新参数值

修复子组件ngOnChanges：

import { SimpleChanges } from '@angular/core';

ngOnChanges(changes: SimpleChanges): void {
  const queryParamChange = changes.queryParams;
  // 只要queryParams发生变化就更新FormGroup
  if (queryParamChange) {
    this.filterFormGroup.patchValue(queryParamChange.currentValue, { emitEvent: true });
    console.log('FormGroup已更新:', queryParamChange.currentValue);
  }
}

3. 确保输入属性引用变化 #

Angular仅在输入属性的引用发生变化时触发ngOnChanges。父组件中使用扩展运算符{ ...changedQueryParams }创建新对象，能保证每次参数变化都生成新引用，触发子组件的变更检测。

额外调试步骤 #

• 在父组件的subscribe回调中添加console.log('路由参数更新:', changedQueryParams)，确认是否接收到新参数
• 在子组件的ngOnChanges中打印console.log(changes)，查看变化对象的具体结构

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