如何从Angular组件向服务传递UntypedFormGroup与DestroyRef依赖

以下两种方案均能实现从组件为服务提供UntypedFormGroup和DestroyRef依赖，且无需将这两个依赖注入到组件构造函数中：

方案一：工厂提供者直接创建服务实例 #

无需额外定义令牌，直接在组件的providers中通过工厂函数为服务传递依赖。

1. 保持服务代码不变 #

注意不要设置providedIn，由组件负责提供服务实例：

@Injectable()
export class CalculateFieldsService {
  constructor(
    private jsonForm: UntypedFormGroup,
    private destroy: DestroyRef
  ) {
    // 构造函数逻辑
  }

  // 其他服务方法...
}

2. 组件中配置服务提供者 #

组件内部创建表单，通过工厂函数为服务传递依赖：

import { Component, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
import { CalculateFieldsService } from './calculate-fields.service';
import { DestroyRef } from '@angular/core';

@Component({
  selector: 'app-target-component',
  template: `
    <form [formGroup]="componentForm">
      <!-- 表单控件定义 -->
    </form>
  `,
  providers: [
    {
      provide: CalculateFieldsService,
      useFactory: () => {
        // 获取当前组件的DestroyRef（自动绑定组件上下文）
        const componentDestroyRef = inject(DestroyRef);
        // 获取组件实例，拿到内部表单对象
        const component = inject(AppTargetComponent);
        return new CalculateFieldsService(component.componentForm, componentDestroyRef);
      },
      deps: [AppTargetComponent]
    }
  ]
})
export class AppTargetComponent {
  componentForm: UntypedFormGroup;

  constructor(private fb: UntypedFormBuilder) {
    this.componentForm = this.fb.group({
      username: [''],
      amount: [0]
    });
  }
}

方案二：注入令牌传递表单实例 #

适合多组件复用服务的场景，通过令牌传递表单实例，DestroyRef会自动继承组件上下文实例。

1. 定义表单注入令牌 #

创建单独的令牌文件标识组件级表单：

// form-group.token.ts
import { InjectionToken } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';

export const COMPONENT_FORM_GROUP = new InjectionToken<UntypedFormGroup>('Component-specific Form Group');

2. 修改服务依赖令牌 #

将服务中的UntypedFormGroup依赖替换为注入令牌：

import { Injectable, Inject } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DestroyRef } from '@angular/core';
import { COMPONENT_FORM_GROUP } from './form-group.token';

@Injectable()
export class CalculateFieldsService {
  constructor(
    @Inject(COMPONENT_FORM_GROUP) private jsonForm: UntypedFormGroup,
    private destroy: DestroyRef // 自动获取组件的DestroyRef
  ) { }

  // 其他服务方法...
}

3. 组件中配置令牌和服务 #

组件提供令牌和服务实例，无需注入目标依赖到自身构造函数：

import { Component, inject } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
import { CalculateFieldsService } from './calculate-fields.service';
import { COMPONENT_FORM_GROUP } from './form-group.token';

@Component({
  selector: 'app-target-component',
  template: `
    <form [formGroup]="componentForm">
      <!-- 表单控件定义 -->
    </form>
  `,
  providers: [
    CalculateFieldsService,
    {
      provide: COMPONENT_FORM_GROUP,
      useFactory: () => inject(AppTargetComponent).componentForm,
      deps: [AppTargetComponent]
    }
  ]
})
export class AppTargetComponent {
  componentForm: UntypedFormGroup;

  constructor(private fb: UntypedFormBuilder) {
    this.componentForm = this.fb.group({
      username: [''],
      amount: [0]
    });
  }
}

关键说明 #

• 服务必须在组件级别配置providers，不能在模块级别，因为UntypedFormGroup和DestroyRef是组件上下文特有的实例。
• DestroyRef在组件级注入上下文中会自动绑定当前组件实例，无需手动传递。
• 两种方案均避免了在组件构造函数中直接注入目标依赖，仅通过工厂函数或令牌完成传递。

内容的提问来源于stack exchange，提问作者Amos Isaila Lucian Onofrei