如何在Angular 2中为多个子组件提供单独的服务实例

Question

我有一个应用程序，其中有许多情况带有搜索框，它们的主从视图非常相似。因此，我决定通过服务实现组件之间的通信，将通用功能包装到其自己的模块中。这是层次结构：

MyGenericGridModule
    SearchComponent
    MasterGridComponent
    DetailsComponent
    GridService <-- stateful

AppModule
    CitiesGridComponent
    RetailersGridComponent

我打算创建多个视图，MyGenericGridComponent说明将通过CSS在何处实现布局差异。这是快速的插图： 如何确保GridService为两个相关组件提供单独的实例？

到目前为止，我还没有找到能说明这种情况的阅读材料。我读过的书提到服务应该共享和单例。这使我相信我不正确地解决了这个问题。有没有可以构造组件的更合适的模式？

Answer 1

GridService在组件级别注入意味着您将为每个组件获得不同的实例，而不是从父注入器获得单个实例，例如：

import { Component, OnInit } from '@angular/core';
import { GridService } from '../grid.service';

@Component({
  selector: 'app-cities-grid',
  templateUrl: './cities-grid.component.html',
  styleUrls: ['./cities-grid.component.css'],
  providers: [GridService]
})
export class CitiesGridComponent implements OnInit {

  constructor(gridSvc: GridService) { }

除了注释中提供的链接之外，此指向Angular文档中的组件中提供服务的链接似乎与您的情况一致。