如何从Angular Service中访问Component的Reactive Form及属性数据

首先需要明确：Angular中Service默认是单例，组件是可销毁的实例，你示例中的const id = MyComponent.id是访问类的静态属性，而你定义的id是实例属性，这种写法本身不成立，且@Output是用来定义组件对外事件的装饰器，不能用来修饰普通属性，正确的属性定义直接写public id: number = 7即可。

以下是两种可直接落地的实现方式：

方案1：组件向Service注册实例（适合需要操作表单实例的场景） #

如果需要在Service中调用表单的setValue、markAsDirty等实例方法，可以用这种方式：

第一步：编写共享Service #

// form-share.service.ts
import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Injectable({ providedIn: 'root' })
export class FormShareService {
  // 用Map存储组件数据，支持多实例组件场景
  private componentStore = new Map<string, {
    id?: number,
    form?: FormGroup
  }>();

  // 组件初始化时注册数据
  register(key: string, data: {id?: number, form?: FormGroup}) {
    this.componentStore.set(key, data);
  }

  // 组件销毁时注销，避免内存泄漏
  unregister(key: string) {
    this.componentStore.delete(key);
  }

  // 获取指定组件的数据
  getComponentData(key: string) {
    return this.componentStore.get(key);
  }
}

第二步：组件中注册数据 #

// my.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormShareService } from './form-share.service';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html'
})
export class MyComponent implements OnInit, OnDestroy {
  public id: number = 7;
  public myForm: FormGroup;
  // 组件唯一标识，多实例时区分不同组件
  private readonly COMPONENT_KEY = 'my-form-1';

  constructor(
    private fb: FormBuilder,
    private formShareService: FormShareService
  ) {
    // 初始化响应式表单
    this.myForm = this.fb.group({
      username: [''],
      age: [null]
    })
  }

  ngOnInit() {
    // 向Service注册当前组件的属性和表单
    this.formShareService.register(this.COMPONENT_KEY, {
      id: this.id,
      form: this.myForm
    })
  }

  ngOnDestroy() {
    // 销毁时必须注销，防止内存泄漏
    this.formShareService.unregister(this.COMPONENT_KEY);
  }
}

第三步：Service中访问数据 #

在Service或者任意注入了FormShareService的位置，直接调用方法获取即可：

// 获取组件数据
const componentData = this.formShareService.getComponentData('my-form-1');
// 取id
const id = componentData?.id;
// 取表单实例
const form = componentData?.form;
// 取表单值
const formValue = form?.value;

方案2：数据流同步（更推荐，耦合度更低） #

如果不需要操作表单实例，仅需要获取表单数据，建议用RxJS数据流实现，避免Service持有组件实例导致的内存泄漏风险：

第一步：编写数据Service #

// form-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FormDataService {
  // 存储最新表单数据，BehaviorSubject会保留最新值
  private formDataSource = new BehaviorSubject<{id?: number, formValue?: any} | null>(null);
  // 对外暴露只读的可观察对象
  public formData$ = this.formDataSource.asObservable();

  // 组件更新数据时调用
  updateData(data: {id?: number, formValue?: any}) {
    this.formDataSource.next(data);
  }

  // 直接获取最新数据
  getLatestData() {
    return this.formDataSource.value;
  }
}

第二步：组件中同步表单数据 #

// my.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormDataService } from './form-data.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html'
})
export class MyComponent implements OnInit, OnDestroy {
  public id: number = 7;
  public myForm: FormGroup;
  private destroy$ = new Subject<void>();

  constructor(
    private fb: FormBuilder,
    private formDataService: FormDataService
  ) {
    this.myForm = this.fb.group({
      username: [''],
      age: [null]
    })
  }

  ngOnInit() {
    // 订阅表单值变化，自动同步到Service
    this.myForm.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        this.formDataService.updateData({
          id: this.id,
          formValue: value
        })
      })
    // 初始化时同步一次初始值
    this.formDataService.updateData({
      id: this.id,
      formValue: this.myForm.value
    })
  }

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

第三步：获取数据 #

// 订阅方式获取实时数据
this.formDataService.formData$.subscribe(data => {
  const id = data?.id;
  const formValue = data?.formValue;
})

// 直接取最新值
const latestData = this.formDataService.getLatestData();

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