Angular12:在Parent组件中监听多个子事件
Angular 12: Listening to multiple children events in Parent component
我是 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()
}
使用共享数据服务
您可以在您的应用程序上共享数据服务,您已经知道了。如果您想在应用程序的其他地方使用共享数据,这是一个不错的选择。
使用 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
})
}
我是 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()
}
使用共享数据服务
您可以在您的应用程序上共享数据服务,您已经知道了。如果您想在应用程序的其他地方使用共享数据,这是一个不错的选择。
使用 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
})
}