Angular中子组件@Input未随父组件数据更新的问题求助

这个问题我之前开发Angular项目时也碰到过，核心原因是回调函数的this上下文丢失——你以为父组件的matchDocument已经更新，但实际上组件实例里的变量根本没被正确赋值！

第一步：修复回调函数的this绑定 #

看你pvp.component.ts里的订阅代码：

.subscribe(this.onDocumentChange);

直接把类方法onDocumentChange作为回调传递时，函数内部的this不会指向你的PvpComponent实例，而是指向订阅的Observable上下文。所以你在onDocumentChange里给this.matchDocument赋值，其实是给一个陌生对象的属性赋值，根本没影响到组件里的matchDocument！

解决方法有两种，选一种就行：

1. 用bind绑定this：

.subscribe(this.onDocumentChange.bind(this));

2. 用箭头函数包裹回调：

.subscribe(docChange => this.onDocumentChange(docChange));

这样修改后，onDocumentChange里的this就会正确指向你的组件实例，父组件的matchDocument才会真正被更新，子组件的@Input也会同步拿到最新值。

额外排查点（如果上述方法无效的话） #

• 确认inArrowhead变量是否一直为true：你的子组件用了*ngIf="inArrowhead"，如果这个值在文档更新时发生波动（比如短暂变为false再变回true），子组件会被重新创建，可能导致数据同步异常，要确保这个状态稳定。
• 手动触发变更检测（极端情况）：如果你的订阅是在Angular变更检测之外的上下文执行的（比如某些第三方异步操作），可以注入ChangeDetectorRef手动触发检测：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  onDocumentChange(docChange) {
    this.matchDocument = docChange;
    this.cdr.detectChanges(); // 手动触发变更检测
    console.log('changing match doc to ', JSON.stringify(this.matchDocument));
  }
  

测试验证 #

修改后，再去更新Firebase文档，父组件的matchDocument会正确更新，子组件调用test()时就能输出最新的数据了。

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