问题描述
我有一个父组件,调用了两个相同的子组件。子组件包含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) { }
}