Angular父组件值变更时子组件@Input绑定值未同步更新怎么办

• 父组件通过路由获取id、category参数，首次加载时将参数通过属性绑定传给子组件，全流程正常
• 页面公共搜索栏触发路由跳转、传入新的id和media_type（对应父组件的category参数）时，父组件模板上展示的id、category值能正常更新，但子组件接收的对应值始终为首次加载的旧值
• 目标是不刷新页面的前提下，实现父组件的路由参数更新后，自动同步最新值给子组件，无需重建组件

出现这种情况的核心原因是子组件没有对输入属性的变更做出响应：
Angular在导航到同一路由的不同参数时，默认会复用当前的组件实例，不会重新创建子组件。如果子组件仅在ngOnInit生命周期（仅在组件首次创建时执行一次）里读取输入值、执行业务逻辑，那么后续父组件更新绑定的属性值时，子组件内基于旧输入值的业务逻辑和缓存的内部变量不会自动更新，就会出现显示旧值的情况。

不需要手动通过ViewChild强制调用子组件方法传值，顺着Angular的单向数据流机制实现即可，两种实现方式可以任选：

方案1：用输入属性的Set/Get监听值变化 #

直接在@Input属性上写setter方法，每次输入值被父组件更新时，自动触发内部业务逻辑执行，示例代码如下（修改子组件TS）：

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

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponent implements OnInit {
  // 内部存储的实际参数值
  private _id: any;
  private _category: any;

  @Input() 
  // 每次父组件传入的id更新时，自动触发set逻辑
  set id(value: any) {
    this._id = value;
    // 这里放原来依赖id执行的业务，比如根据id拉对应的数据
    this.refreshChildData();
  }
  get id(): any {
    return this._id;
  }

  @Input()
  set category(value: any) {
    this._category = value;
    this.refreshChildData();
  }
  get category(): any {
    return this._category;
  }

  ngOnInit(): void {
    // 首次组件初始化时也会自动触发setter逻辑，不需要额外写初始化逻辑
  }

  // 抽公共的业务方法，每次参数更新就重新执行
  refreshChildData() {
    // 放原来在ngOnInit里写的、依赖id和category的业务逻辑即可
    console.log('子组件接收到最新参数', this._id, this._category);
  }
}

方案2：实现OnChanges钩子统一监听输入变化 #

如果有多个输入属性需要监听，可以实现OnChanges接口，只要任意输入属性更新，就会自动触发ngOnChanges方法执行，示例代码如下（修改子组件TS）：

import { Component, OnChanges, SimpleChanges, OnInit } from '@angular/core';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html'
})
export class ChildComponent implements OnInit, OnChanges {
  @Input() id: any;
  @Input() category: any;

  // 只要父组件传入的输入属性值发生变化，就会自动执行这个方法
  ngOnChanges(changes: SimpleChanges) {
    // 判断两个参数是否有任意一个发生变化
    if (changes['id'] || changes['category']) {
      // 拿到最新的参数值，执行业务逻辑
      this.refreshChildData();
    }
  }

  ngOnInit(): void {
    // 组件首次初始化时，输入属性第一次赋值也会触发ngOnChanges，不需要额外写初始化逻辑
  }

  refreshChildData() {
    // 放依赖id、category的业务逻辑即可
    console.log('子组件接收到最新参数', this.id, this.category);
  }
}

• 不需要修改父组件的路由订阅逻辑，只要父组件在路由订阅回调里正确给this.id、this.category赋了新值，框架会自动把最新值推给子组件的输入属性
• 记得在路由订阅里补充退订逻辑，避免内存泄漏，但这部分逻辑不影响参数同步的效果
• 不推荐手动用ViewChild拿到子组件实例、直接给子组件属性赋值的方式，这种方式打破了Angular的单向数据流规则，后续维护成本更高

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