Angular12：在Parent组件中监听多个子事件

Question

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

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

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

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

问题： 我不知道我应该在这里使用的正确方法，我知道我需要监听每个子组件的事件，但我没有不知道怎么办。

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

最好的方法是什么？

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

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

DeleteItem.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 
   })
}

Angular12：在Parent组件中监听多个子事件

Angular 12: Listening to multiple children events in Parent component

javascript

angular

typescript

rxjs

eventemitter

使用共享数据服务

使用 onActivate