Angular子组件绑定onChange类事件的最优方案及无RxJs实现可行性

方案结论 #

完全可以不依赖RxJS和订阅机制实现，最优最简方案是结合@ContentChildren子组件查询 + 属性注入的组合实现，整体逻辑和React的cloneElement注入属性逻辑完全对齐

实现步骤（无RxJS依赖版本） #

1. 定义子组件my-radio #

子组件只需要声明接收父组件要注入的属性和回调即可，无需额外配置：

// my-radio.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-radio',
  template: `<label [class.disabled]="disabled" (click)="handleClick()">
    <input type="radio" [name]="name" [checked]="checked" [disabled]="disabled"/>
    <ng-content></ng-content>
  </label>`
})
export class MyRadioComponent {
  // 业务侧手动传入的属性
  @Input() value: any;
  // 以下属性均为父组件自动注入，无需业务侧传值
  @Input() name: string;
  @Input() checked: boolean;
  @Input() disabled: boolean;
  @Input() onChange: (value: any) => void;

  handleClick() {
    if (!this.disabled && this.onChange) {
      this.onChange(this.value);
    }
  }
}

2. 定义父组件my-radio-group #

父组件用@ContentChildren查询到所有嵌套的子my-radio实例，直接给每个实例赋值属性和回调，完全不需要RxJS参与业务逻辑：

// my-radio-group.component.ts
import { Component, Input, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { MyRadioComponent } from './my-radio.component';

@Component({
  selector: 'my-radio-group',
  template: `<ng-content></ng-content>`
})
export class MyRadioGroupComponent implements AfterContentInit {
  @Input() name: string;
  @Input() disabled: boolean = false;
  @Input() orientation: 'vertical' | 'horizontal' = 'vertical';
  @Input() value: any;
  // 对外抛出的选择变更事件
  @Output() selectionChange = new EventEmitter<any>();

  // 查询所有嵌套的子radio组件实例
  @ContentChildren(MyRadioComponent) radios: QueryList<MyRadioComponent>;

  ngAfterContentInit() {
    // 初始化给所有子radio注入属性和回调
    this.updateRadios();
    // 不需要支持子radio动态增删的场景可以删掉下一行，完全零RxJS依赖
    this.radios.changes.subscribe(() => this.updateRadios());
  }

  private updateRadios() {
    this.radios.forEach(radio => {
      radio.name = this.name;
      radio.disabled = radio.disabled || this.disabled;
      radio.checked = radio.value === this.value;
      // 注入onChange回调，和React的注入逻辑完全一致
      radio.onChange = (selectedValue) => {
        this.value = selectedValue;
        this.selectionChange.emit(selectedValue);
        // 更新所有子radio的选中状态
        this.updateRadios();
      }
    })
  }
}

3. 业务侧使用方式 #

和你给出的示例用法完全一致，不需要给子组件额外传任何回调：

<my-radio-group
    [name]="'fruit'"
    [disabled]="false"
    (selectionChange)="selectionChange($event)"
    [orientation]="'horizontal'"
    [value]="selectedFruit"
>
    <my-radio [value]="'apple'">apple</my-radio>
    <my-radio [value]="'orange'">orange</my-radio>
    <my-radio [value]="'banana'">banana</my-radio>
</my-radio-group>

对应业务逻辑只需要声明变量和处理函数即可：

selectedFruit = 'apple';

selectionChange(value: string) {
  this.selectedFruit = value;
  console.log('选中的值：', value);
}

补充说明 #

• 上述实现业务侧完全不需要维护RxJS订阅逻辑，唯一用到的QueryList.changes是Angular框架内置的监听子组件动态变化的API，不需要动态增删子组件的场景可以直接删除这行代码，实现纯零RxJS依赖。
• 这套方案是Angular生态下最接近ReactcloneElement注入属性的实现方式，逻辑清晰、代码量小、无额外依赖，属于当前场景的最优解。

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