Angular 17：独立组件中非根服务的共享实例实现方案

方法一：利用父组件的providers数组（推荐） #

直接在共享范围的父组件中声明providers，所有嵌套子组件会自动共享该服务实例，无需手动操作注入器，完全契合Angular的组件注入器层级设计。

1. 定义共享服务 #

// shared.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {
  sharedValue = '这是共享实例的值';
}

2. 父组件中限定服务作用域 #

// parent.component.ts
import { Component, inject } from '@angular/core';
import { ChildComponent } from './child.component';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [ChildComponent],
  providers: [SharedService], // 在此处提供服务，作用域覆盖父组件及所有子组件
  template: `
    <app-child></app-child>
    <app-child></app-child>
  `,
})
export class ParentComponent {
  // 父组件自身也能获取同一个共享实例
  service = inject(SharedService);
}

3. 子组件直接注入使用 #

// child.component.ts
import { Component, inject } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-child',
  standalone: true,
  template: `子组件获取的值：{{ service.sharedValue }}`,
})
export class ChildComponent {
  // 自动继承父组件的服务实例，无需额外配置
  service = inject(SharedService);
}

这种方式的优势是Angular自动管理服务生命周期：父组件销毁时，对应的服务实例也会被销毁，完全匹配组件树的生命周期逻辑。

方法二：手动创建全局共享子环境注入器 #

如果需要跨多个非嵌套组件共享服务实例，可以手动创建一个全局唯一的子环境注入器，所有组件统一使用该注入器获取服务。

1. 创建共享注入器 #

// shared-injector.ts
import { EnvironmentInjector, inject } from '@angular/core';
import { SharedService } from './shared.service';

// 在根注入器上下文初始化子注入器，确保全局唯一
export const sharedInjector = inject(EnvironmentInjector).createChild([
  SharedService,
]);

2. 组件中指定注入器获取服务 #

// component-a.ts
import { Component, inject } from '@angular/core';
import { SharedService } from './shared.service';
import { sharedInjector } from './shared-injector';

@Component({
  selector: 'app-component-a',
  standalone: true,
  template: `组件A获取的值：{{ service.sharedValue }}`,
})
export class ComponentA {
  // 指定使用共享注入器获取服务实例
  service = inject(SharedService, { injector: sharedInjector });
}

// component-b.ts
import { Component, inject } from '@angular/core';
import { SharedService } from './shared.service';
import { sharedInjector } from './shared-injector';

@Component({
  selector: 'app-component-b',
  standalone: true,
  template: `组件B获取的值：{{ service.sharedValue }}`,
})
export class ComponentB {
  service = inject(SharedService, { injector: sharedInjector });
}

注意事项 #

• 手动创建的注入器必须在根注入器上下文初始化（比如根组件、根服务中），避免重复创建导致实例不共享。
• 这种方式的服务生命周期与根注入器绑定，不会随单个组件销毁而销毁，适合全局跨组件共享但又不属于根级别的场景。

常见问题排查（Environment Injector无效原因） #

如果之前使用Environment Injector未达到预期效果，大概率是以下问题：

• 每个组件单独创建了子注入器，导致每个组件的服务实例相互独立。
• 注入器未正确关联到组件的注入器树，组件仍默认使用根注入器或自身注入器获取服务。

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