如何在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文档中指向providing services in components的链接似乎与您的方案一致。