Angular 12：在父组件中监听多个子事件

Question

在事件等方面，我是 Angular 的初学者。

最近我一直在做这个项目，我有一个名为 Layout 的父组件，它包含多个子组件，这些子组件应该通过各种 服务 进行 CRUD 操作.

现在 Layout 组件有一个导航栏，这个导航栏显示我的库存中每个类别的物品数量。

目标：当我在其中一个子组件中发出添加或删除请求时，父组件应该向后端发起请求。这样它将从数据库中检索新的项目数

问题：我不知道我应该在这里使用正确的方法，我知道我需要监听来自每个子组件的事件，但我不知道如何。

我应该监听组件还是订阅每个服务并等待它发出事件？

最好的方法是什么？

我的代码很长，所以我将添加一些片段来说明我在做什么：

Layout.component.ts

 ngOnInit(): void {
        this.prepareNavbar()
    }

Layout.component.html

<nav> 
<!-- Here I display the numbers of each item retrieved from the database -->
</nav>
<router-outlet></router-outlet>

AddItem1.component.ts

addItem(){
this.Categorie1Service.addItem.subscribe()
}

删除Item.component.ts

DeleteItem(){
this.Categorie2Service.DeletItem.subscribe()
}

Answer 1

使用共享数据服务

您可以在您的应用程序上共享一个数据服务，您已经知道了这一点。如果您想在应用程序的其他地方使用共享数据，这是一个不错的选择。

使用 onActivate

在 child.component.ts 中：

@Output() deleteEvent = new EventEmitter
@Output() addEvent = new EventEmitter

deleteItem(id){
    this.deleteEvent.emit(id)
}
addItem(data) {
    this.deleteEvent.emit(data)
}

在父模板中：

<router-outlet (activate)="onActivate($event)"></router-outlet>

在 parent.component.ts 中：

onActivate(componentReference) {
   componentReference.deleteEvent.subscribe((id) => {
      // implementation
   });
   
   componentReference.addEvent.subscribe((data) => {
      // implementation 
   })
}