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

Posted 2023-02-23

【中文标题】Angular 在父子组件中使用多个服务实例

【英文标题】：Angular Use Multiple Instances of Service In Parent to Child Components

【发布时间】：2021-01-24 05:08:39

【问题描述】：

我有一个父组件调用两个相同的子组件。子组件包含 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,

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

【参考方案1】：

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

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

【讨论】：

我是通过html选择器调用子组件，那么如何注入服务呢？谢谢

您无需更改任何其他内容，只需在子组件中而不是在模块中提供服务即可。服务可以像往常一样通过构造函数注入。

你能显示更多代码吗？因为 productGridService 已经在构造函数中了，要我在构造函数中去掉吗？什么是“YourService”？只是需要更多的代码来显示，我会明白的，谢谢

或者我只需要写 providers: [ProductGridService] ，我可以开始了吗？

我对你的例子做了更明确的回答。最后，您只需将服务添加到子组件的 providers 数组中。