Angular路由变化时@Input值未传递到子组件问题咨询

问题根因 #

你遇到的问题核心原因有两个高概率可能：

1. 直接对ParamMap实例执行JSON.stringify是错误操作：ParamMap是Angular封装的类实例，本身没有可枚举的自有属性，直接序列化得到的结果永远是"{}"，所以即使URL参数变化，你赋值给urlParam的字符串始终没有变化，Angular变更检测判定输入属性未更新，自然不会触发子组件的setter。
2. 父/子组件设置了ChangeDetectionStrategy.OnPush变更检测策略，你在订阅回调中修改属性后没有主动触发变更检测，导致框架没有检测到属性更新。

修复步骤 #

步骤1：正确转换ParamMap为可序列化对象 #

先把ParamMap遍历转成普通JS对象再序列化，确保每次URL参数变化时，urlParam的值会对应更新：

import { ParamMap } from '@angular/router';

// 父组件订阅代码修改为：
this.activatedRoute.queryParamMap.subscribe((paramMap: ParamMap) => {
  // 遍历转换ParamMap为普通对象
  const params: Record<string, any> = {};
  paramMap.keys.forEach(key => {
    params[key] = paramMap.get(key);
  });
  this.urlParam = JSON.stringify(params);
});

步骤2：适配OnPush变更检测策略 #

如果你的父组件@Component装饰器中配置了changeDetection: ChangeDetectionStrategy.OnPush，需要注入变更检测器，赋值后主动标记组件需要检查：

import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  // ... 你的组件配置
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class 你的父组件名 {
  constructor(private cdr: ChangeDetectorRef) {}

  // 订阅逻辑修改为：
  this.activatedRoute.queryParamMap.subscribe((paramMap: ParamMap) => {
    const params: Record<string, any> = {};
    paramMap.keys.forEach(key => {
      params[key] = paramMap.get(key);
    });
    this.urlParam = JSON.stringify(params);
    // 主动标记组件需要进行变更检测
    this.cdr.markForCheck();
  });
}

可选简化方案：使用异步管道自动处理 #

你也可以不用手动订阅，直接把参数流转成Observable配合异步管道传值，Angular会自动处理订阅、销毁和变更检测：

// 父组件中直接定义参数流
import { map } from 'rxjs/operators';

urlParam$ = this.activatedRoute.queryParamMap.pipe(
  map(paramMap => {
    const params: Record<string, any> = {};
    paramMap.keys.forEach(key => params[key] = paramMap.get(key));
    return JSON.stringify(params);
  })
);

父组件模板修改为：

<search [searchCriteriaForm]="searchCriteriaForm" [urlParam]="urlParam$ | async"></search>

验证方式 #

修改完成后可在父组件的参数订阅逻辑中打印this.urlParam，确认每次URL参数变化时输出的字符串会对应更新，此时子组件的@Input setter会正常触发。

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