在每个组件中提供唯一的服务实例

Question

我有一种情况，我希望能够在页面上同时使用多个小部件组件。我想隔离 ContainerComponent 依赖项，以便每个 ContainerComponent 实例引用唯一的服务实例。

例如，我希望以下组件的每个实例都具有 "FhirService":

的唯一实例

export class ContainerComponent implements OnInit, OnDestroy, AfterViewInit {
...
constructor(private _fhir: FhirService, private _questionnaireService: QuestionnaireService, private cdr: ChangeDetectorRef) {}

服务定义：

@Injectable({
  providedIn: 'root'
})
export class FhirService {
  public guidanceResponseBS: BehaviorSubject<GuidanceResponse>;

  constructor(private _http: HttpClient, private _settingsService: SettingsService) {
    this.guidanceResponseBS = new BehaviorSubject<GuidanceResponse>(null);
  }

...

这是怎么做到的？

Answer 1

首先，您不需要在 angular 中拥有多个服务实例。它是一个 DI 框架，因此您（在大多数情况下）应该有每个服务的单个实例。

可能导致您认为您最终需要为每个 class 提供服务的 specific/separate 个实例的原因是：

public guidanceResponseBS: BehaviorSubject<GuidanceResponse>;

您正在将数据（状态）的概念与 business logic 的概念相结合。您的服务不应该 contain/save 数据，至少不是您想要的 business logic 数据。

现在，也有包含数据的服务，但这样做通常是为了在应用程序中的更多组件之间共享数据。通常，在这些情况下，您会在同一阶段加载数据并将其保存在服务中以供将来使用。

Answer 2

如果你想为不同的组件提供唯一的服务实例，你必须添加服务在组件的@Component()装饰器中。你应该添加这些服务到子模块声明的提供程序数组或到组件声明：

You can configure injectors with providers at different levels of your app, by setting a metadata value in one of three places:

In the @Injectable() decorator for the service itself.

In the @NgModule() decorator for an NgModule.

In the @Component() decorator for a component.

EX:

 @Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `,
 providers: [myService]
})

在每个组件中提供唯一的服务实例

Provide Unique Service Instance in Every Component

angular

angular-dependency-injection