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) { }
 }