Angular表单中如何从子组件获取父组件的readOnly属性

在Angular里，我们可以利用**依赖注入（DI）**的特性，让子组件自动获取父级custom-form的readOnly值，不用给每个子组件手动绑定属性。下面给你几个实用的方案：

方案1：直接注入父组件实例（最简单直接） #

首先，我们需要让custom-form组件暴露它的readOnly状态，并且支持监听变化：

步骤1：改造CustomFormComponent #

import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'custom-form',
  template: `<ng-content></ng-content>` // 用ng-content容纳子组件
})
export class CustomFormComponent {
  // 用BehaviorSubject来存储并广播readOnly状态
  private readonly _readOnly$ = new BehaviorSubject<boolean>(false);
  // 对外暴露可观察对象，供子组件订阅
  readonly readOnly$ = this._readOnly$.asObservable();

  @Input() formGroup: FormGroup;

  @Input() 
  set readOnly(value: boolean) {
    this._readOnly$.next(!!value); // 确保值是布尔类型
  }

  get readOnly(): boolean {
    return this._readOnly$.value;
  }
}

步骤2：在子组件中注入父组件 #

以custom-input为例，我们用@Optional()和@SkipSelf()注入父级的CustomFormComponent，这样就能自动获取它的readOnly状态：

import { Component, Input, OnInit, OnDestroy, Optional, SkipSelf } from '@angular/core';
import { ControlContainer, FormControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CustomFormComponent } from './custom-form.component';

@Component({
  selector: 'custom-input',
  template: `
    <!-- 可编辑状态：显示输入框 -->
    <input *ngIf="!formIsReadOnly" 
           [formControl]="control" 
           [placeholder]="formControlName" />
    <!-- 只读状态：显示文本 -->
    <span *ngIf="formIsReadOnly" class="read-only-text">
      {{ control?.value || '-' }}
    </span>
  `
})
export class CustomInputComponent implements OnInit, OnDestroy {
  @Input() formControlName: string;
  control: FormControl;
  formIsReadOnly = false;

  // 用于销毁订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(
    // 注入父级的CustomFormComponent，@Optional()避免不在form内使用时报错
    @Optional() @SkipSelf() private parentForm: CustomFormComponent,
    // 获取当前表单容器，用于拿到对应的FormControl
    private controlContainer: ControlContainer
  ) {}

  ngOnInit(): void {
    // 获取当前输入框对应的FormControl
    this.control = this.controlContainer.control.get(this.formControlName) as FormControl;
    
    // 订阅父组件的readOnly状态变化
    if (this.parentForm) {
      this.parentForm.readOnly$
        .pipe(takeUntil(this.destroy$))
        .subscribe(isReadOnly => {
          this.formIsReadOnly = isReadOnly;
        });
    }
  }

  ngOnDestroy(): void {
    // 清理订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

这样，所有放在custom-form内部的子组件（比如custom-select）都可以用同样的方式注入CustomFormComponent，自动同步只读状态，完全不用逐个绑定[readOnly]属性。

方案2：用注入令牌传递状态（更灵活，支持嵌套场景） #

如果你的项目有嵌套表单的需求，或者希望状态传递更解耦，可以用注入令牌来传递readOnly状态：

步骤1：定义注入令牌 #

import { InjectionToken } from '@angular/core';
import { Observable } from 'rxjs';

// 创建一个注入令牌，用于传递表单只读状态的Observable
export const FORM_READONLY_STATE = new InjectionToken<Observable<boolean>>('Form ReadOnly State');

步骤2：在CustomFormComponent中提供令牌 #

import { Component, Input, Provider } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { FormGroup } from '@angular/forms';
import { FORM_READONLY_STATE } from './form-readonly.token';

@Component({
  selector: 'custom-form',
  template: `<ng-content></ng-content>`,
  providers: [
    {
      provide: FORM_READONLY_STATE,
      // 工厂函数：从CustomFormComponent实例中获取readOnly$
      useFactory: (formComponent: CustomFormComponent) => formComponent.readOnly$,
      deps: [CustomFormComponent]
    }
  ]
})
export class CustomFormComponent {
  private readonly _readOnly$ = new BehaviorSubject<boolean>(false);
  readonly readOnly$ = this._readOnly$.asObservable();

  @Input() formGroup: FormGroup;

  @Input() 
  set readOnly(value: boolean) {
    this._readOnly$.next(!!value);
  }

  get readOnly(): boolean {
    return this._readOnly$.value;
  }
}

步骤3：子组件注入令牌 #

import { Component, Input, OnInit, OnDestroy, Optional, Inject } from '@angular/core';
import { ControlContainer, FormControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FORM_READONLY_STATE } from './form-readonly.token';

@Component({
  selector: 'custom-select',
  template: `
    <select *ngIf="!formIsReadOnly" [formControl]="control">
      <!-- 选项内容 -->
    </select>
    <span *ngIf="formIsReadOnly">
      {{ control?.value || '未选择' }}
    </span>
  `
})
export class CustomSelectComponent implements OnInit, OnDestroy {
  @Input() formControlName: string;
  control: FormControl;
  formIsReadOnly = false;

  private destroy$ = new Subject<void>();

  constructor(
    // 注入只读状态的Observable
    @Optional() @Inject(FORM_READONLY_STATE) private readonly readOnly$: Observable<boolean>,
    private controlContainer: ControlContainer
  ) {}

  ngOnInit(): void {
    this.control = this.controlContainer.control.get(this.formControlName) as FormControl;
    
    if (this.readOnly$) {
      this.readOnly$
        .pipe(takeUntil(this.destroy$))
        .subscribe(isReadOnly => {
          this.formIsReadOnly = isReadOnly;
        });
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

这个方案的优势是：如果有嵌套的custom-form，内层表单可以重新提供FORM_READONLY_STATE令牌，覆盖外层的状态，灵活性更高。

方案3：基础组件继承（减少重复代码） #

如果你的自定义输入组件很多，都需要这个只读逻辑，可以创建一个基础组件，把通用逻辑封装进去，然后所有子组件继承它：

步骤1：创建基础组件 #

import { OnInit, OnDestroy, Optional, SkipSelf, Inject } from '@angular/core';
import { ControlContainer, FormControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CustomFormComponent } from './custom-form.component';
import { FORM_READONLY_STATE } from './form-readonly.token';

export abstract class BaseFormControlComponent implements OnInit, OnDestroy {
  formControlName: string;
  control: FormControl;
  formIsReadOnly = false;

  private destroy$ = new Subject<void>();

  constructor(
    @Optional() @SkipSelf() protected parentForm: CustomFormComponent,
    @Optional() @Inject(FORM_READONLY_STATE) protected readonly readOnly$: Observable<boolean>,
    protected controlContainer: ControlContainer
  ) {}

  ngOnInit(): void {
    this.control = this.controlContainer.control.get(this.formControlName) as FormControl;
    
    // 优先使用注入令牌的方式，没有的话再用父组件实例
    if (this.readOnly$) {
      this.readOnly$.pipe(takeUntil(this.destroy$)).subscribe(val => this.formIsReadOnly = val);
    } else if (this.parentForm) {
      this.parentForm.readOnly$.pipe(takeUntil(this.destroy$)).subscribe(val => this.formIsReadOnly = val);
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

步骤2：子组件继承基础组件 #

import { Component, Input } from '@angular/core';
import { BaseFormControlComponent } from './base-form-control.component';

@Component({
  selector: 'custom-input',
  template: `
    <input *ngIf="!formIsReadOnly" [formControl]="control" />
    <span *ngIf="formIsReadOnly">{{ control.value }}</span>
  `
})
export class CustomInputComponent extends BaseFormControlComponent {
  @Input() override formControlName: string; // 覆盖父类的属性
}

这样所有子组件只需要继承基础组件，不用重复写订阅逻辑，代码更简洁。

注意事项 #

• 用@Optional()修饰注入：避免子组件不在custom-form内部使用时抛出注入错误。
• 一定要清理订阅：在ngOnDestroy中调用destroy$.next()和destroy$.complete()，防止内存泄漏。
• 状态同步：用BehaviorSubject可以确保子组件订阅时能拿到当前的最新状态，而不是等下一次变化。

内容的提问来源于stack exchange，提问作者v.krepkiy