在父子组件中有角度地使用多个服务实例

如何解决在父子组件中有角度地使用多个服务实例

我有一个父组件，调用了两个相同的子组件。子组件包含SearchForm和Grid。

两个搜索网格以iframe格式并排显示。允许用户进行两次搜索。

进行网格搜索时，他们似乎正在利用相同的服务，并填充两个网格。在一个网格组件中进行搜索，将数据填充到另一个网格组件中。搜索被克隆。

如何确保每个子组件使用不同的服务实例？ 子组件在html选择器中调用。

<div>
   <app-product-search-grid></app-product-search-grid>

   <app-product-search-grid></app-product-search-grid>
</div>

不确定如何应用此答案， Using multiple instances of the same service

子组件看起来像这样，

export class ProductSearchGridComponent

  constructor(
    private productGridService: ProductGridService,

如果可能的话，我真的不想更改构造函数，因为它可能会影响其他人的代码。

解决方法

如果两个孩子都需要单独的服务实例，则可以在组件级别提供服务：

@Component({
/* . . . */
  providers: [ProductGridService]
})
export class ProductSearchGridComponent {
  constructor(private service: ProductGridService) { }
 }