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

Question

我有一个应用程序，其中有多个相当相似的主从 View 和搜索框的情况。因此，我决定将通用功能包装到自己的模块中，并通过服务实现组件之间的通信。这是层次结构:

MyGenericGridModule
    SearchComponent
    MasterGridComponent
    DetailsComponent
    GridService <-- stateful

AppModule
    CitiesGridComponent
    RetailersGridComponent

我打算创建 MyGenericGridComponent 的多个 View ，其中布局差异将通过 css 实现。这是快速说明: 如何确保为两个依赖组件提供单独的 GridService 实例？

到目前为止，我还没有找到展示此场景的阅读 Material 。我读到的内容提到服务应该是共享的和单例的。这让我相信我错误地解决了这个问题。是否有更合适的模式可以构建组件？

Answer 1

在组件级别注入(inject) GridService 意味着您会为每个组件获得不同的实例，而不是来自父注入(inject)器的单个实例，例如:

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) { }

除了评论中提供的链接之外，此链接还指向 providing services in components Angular 文档中的内容似乎与您的场景一致。