Angular 12 如何将组件对象传入服务？能否通过自定义InjectionToken注入？

你可以通过自定义InjectionToken实现组件对象注入到服务，也可以根据服务的作用域选择更适配的传值方案，具体实现如下：

适用场景：服务仅在当前组件/当前模块范围内使用，每个组件对应独立的服务实例。
实现步骤：

• 第一步：定义自定义注入Token

import { InjectionToken } from '@angular/core';
// 泛型可以替换为你要传递的对象的实际类型
export const COMPONENT_TARGET_OBJ = new InjectionToken<Record<string, any>>('组件传递给服务的目标对象');

• 第二步：在组件的providers数组中注册Token，绑定组件内的目标对象

import { Component } from '@angular/core';
import { MyService } from './my.service';
import { COMPONENT_TARGET_OBJ } from './injection-tokens';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  // 注意：服务和Token都要在当前组件的providers中声明，不要放到根模块的providers里
  providers: [
    MyService,
    {
      provide: COMPONENT_TARGET_OBJ,
      // 通过工厂函数动态获取当前组件实例的目标对象
      useFactory: (demoComponent: DemoComponent) => demoComponent.targetObj,
      deps: [DemoComponent]
    }
  ]
})
export class DemoComponent {
  // 需要传递给服务的内部对象
  targetObj = {
    id: 1,
    name: '组件内部对象',
    data: []
  };

  constructor(private myService: MyService) {}
}

• 第三步：在服务中注入Token即可使用组件传递的对象

import { Inject, Injectable } from '@angular/core';
import { COMPONENT_TARGET_OBJ } from './injection-tokens';

@Injectable()
export class MyService {
  constructor(@Inject(COMPONENT_TARGET_OBJ) private componentObj: Record<string, any>) {
    // 此处可直接访问组件传递的对象，对象更新后服务也能获取到最新值
    console.log('获取到组件的对象：', this.componentObj);
  }
}

适用场景：服务是全局根级注入的公共服务，会被多个不同组件调用。
实现逻辑：不需要额外定义Token，直接在组件调用服务方法时将目标对象作为参数传入即可：

• 服务定义：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 全局单例服务
})
export class PublicService {
  handleBusinessLogic(componentObj: Record<string, any>) {
    // 基于传入的组件对象处理业务
    console.log('传入的组件对象：', componentObj);
  }
}

• 组件调用：

import { Component, OnInit } from '@angular/core';
import { PublicService } from './public.service';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {
  targetObj = {
    id: 1,
    name: '组件内部对象'
  };

  constructor(private publicService: PublicService) {}

  ngOnInit(): void {
    // 调用服务方法时主动传入对象
    this.publicService.handleBusinessLogic(this.targetObj);
  }
}

选型提示：如果服务和组件强绑定，每个组件需要独立的服务实例，优先选择InjectionToken方案；如果服务是全局复用的公共服务，优先选择主动传参方案。

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