Angular中如何实现子组件向父组件传值并同步至另一子组件？

我明白你的问题所在了——你已经通过ChildOne的formReady事件把表单传递给了Parent，Parent再把表单传给ChildTwo，但ChildTwo里的ngOnInit只在组件初始化时执行一次，所以当Parent里的form值更新后，ChildTwo并没有重新计算brokerResumo。下面给你几个可行的解决方案：

方法1：使用ngOnChanges生命周期钩子 #

ngOnChanges会在组件的输入属性发生变化时触发，刚好适合处理这种输入属性更新后需要重新执行逻辑的场景。你可以在ChildTwo中实现这个钩子，监听form的变化：

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

@Component({
  selector: 'app-childTwo',
  template: '...'
})
export class ChildTwoComponent implements OnChanges {
  @Input() form;
  brokerResumo;

  // 实现ngOnChanges钩子
  ngOnChanges(changes: SimpleChanges): void {
    // 检查form属性是否发生了变化，并且当前有值
    if (changes.form && changes.form.currentValue) {
      this.brokerResumo = this.getBrokerResumo(changes.form.currentValue.sms.brokerId);
    }
  }

  getBrokerResumo = (brokerId) => 
    this.brokers.find(element => element.id === brokerId);
}

方法2：给@Input()设置setter #

你可以给form这个输入属性添加一个setter方法，每次form的值被更新时，这个setter就会自动执行，你可以在里面调用获取brokerResumo的逻辑：

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

@Component({
  selector: 'app-childTwo',
  template: '...'
})
export class ChildTwoComponent {
  private _form;
  brokerResumo;

  @Input() 
  set form(value) {
    this._form = value;
    // 每次form更新时重新计算brokerResumo
    if (value?.sms?.brokerId) {
      this.brokerResumo = this.getBrokerResumo(value.sms.brokerId);
    }
  }

  get form() {
    return this._form;
  }

  getBrokerResumo = (brokerId) => 
    this.brokers.find(element => element.id === brokerId);
}

方法3：订阅表单的valueChanges（适合Reactive Forms场景） #

因为你使用的是FormGroup，可以直接订阅它的valueChanges observable，这样每次表单的值发生变化时，都会触发回调来更新brokerResumo：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-childTwo',
  template: '...'
})
export class ChildTwoComponent implements OnInit, OnDestroy {
  @Input() form;
  brokerResumo;
  private formSubscription: Subscription;

  ngOnInit(): void {
    // 订阅表单的valueChanges
    if (this.form) {
      this.formSubscription = this.form.valueChanges.subscribe(() => {
        this.brokerResumo = this.getBrokerResumo(this.form.get('sms.brokerId').value);
      });
      // 初始化时先执行一次
      this.brokerResumo = this.getBrokerResumo(this.form.get('sms.brokerId').value);
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.formSubscription) {
      this.formSubscription.unsubscribe();
    }
  }

  getBrokerResumo = (brokerId) => 
    this.brokers.find(element => element.id === brokerId);
}

这三种方法都能解决你的问题，你可以根据自己的场景选择：

• 如果只是需要在form引用变化时更新，方法1或2更合适；
• 如果需要监听表单内部值的每一次变化，方法3是最佳选择。

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