Angular 在父子组件中使用多个服务实例

Question

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

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

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

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

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

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

不确定如何应用此答案，

子组件如下所示，

export class ProductSearchGridComponent

  constructor(
    private productGridService: ProductGridService,

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

Answer 1

如果您需要在两个子项中使用单独的服务实例，您可以在组件级别提供您的服务：

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

Angular 在父子组件中使用多个服务实例

Angular Use Multiple Instances of Service In Parent to Child Components

typescript

angular-services

angular

angular10