Angular兄弟组件通过响应式表单实现跨组件字段计算显示咨询

平级兄弟组件传值优先选择公共父组件作为中介的方案，实现逻辑简单易上手，非常适合初学者，具体实现步骤如下：

步骤1：编写公共父组件逻辑 #

父组件负责存储Component1的表单控件、获取后端初始值、监听Component2的输入变化并计算更新：

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DataService } from './data.service'; // 你自己的后端请求服务

@Component({
  selector: 'app-parent',
  template: `
    <app-component1 [readControl]="comp1Control"></app-component1>
    <app-component2 (inputValEmit)="onComp2InputChange($event)"></app-component2>
  `
})
export class ParentComponent implements OnInit {
  // Component1绑定的只读响应式控件
  comp1Control = new FormControl({value: 0, disabled: true});

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 请求后端获取初始值填充Component1
    this.dataService.getComp1InitialValue().subscribe(res => {
      this.comp1Control.setValue(res.initialNum);
    })
  }

  // 处理Component2的输入变化，计算后更新Component1的值
  onComp2InputChange(inputNum: number) {
    this.comp1Control.setValue(inputNum + 200);
  }
}

步骤2：编写Component1（只读输入组件） #

通过@Input接收父组件传递的表单控件，直接绑定到模板输入框：

// component1.component.ts
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-component1',
  template: `
    <div>
      <span>Component1只读框：</span>
      <input type="number" [formControl]="readControl" readonly>
    </div>
  `
})
export class Component1Component {
  @Input() readControl!: FormControl;
}

步骤3：编写Component2（用户输入组件） #

自身创建响应式输入控件，通过@Output将输入值实时抛给父组件：

// component2.component.ts
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-component2',
  template: `
    <div>
      <span>Component2输入框：</span>
      <input type="number" [formControl]="inputControl">
    </div>
  `
})
export class Component2Component implements OnInit {
  inputControl = new FormControl(0);
  @Output() inputValEmit = new EventEmitter<number>();

  ngOnInit() {
    // 监听输入值变化，做类型校验后抛出
    this.inputControl.valueChanges.subscribe(val => {
      const validNum = isNaN(Number(val)) ? 0 : Number(val);
      this.inputValEmit.emit(validNum);
    })
  }
}

补充说明 #

• 使用前需在对应NgModule的declarations数组中注册上述三个组件
• 如果两个兄弟组件不属于同一个父组件，可改用共享服务实现：在服务中定义BehaviorSubject存储数值，Component2输入后更新服务的Subject，Component1订阅Subject的变化，计算后更新自身表单控件即可
• 如果你的表单是用FormGroup包裹的，只需要传递对应的FormControl实例即可，逻辑完全通用

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