如果我有多个级别的 Angular 分量,如何使用@Output
将事件从子级发出到父级?
祖 parent :
<parent (handleClick)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
console.log('grandma knows you clicked')
}
上级:
<child (handleClick)="handleClick($event)">
</child>
child :
<div (click)="onClick">Click button
</div>
...
@Output() handleClick = new EventEmitter
onClick() {
this.handleClick.emit('clicked a button')
}
我正在尝试使用它,以便@Output可以深入钻探一些组件,实现此目的的最佳方法是什么,您能否提供示例?
最佳答案
可能有两种方法:
@output
:祖 parent
<parent (notifyGrandParent)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
console.log('grandma knows you clicked')
}
父:
<child (handleClick)="childEvent($event)">
</child>
@Output() notifyGrandParent= new EventEmitter();
childEvent(event) {
this.notifyGrandParent.emit('event')
}
子已在代码中正确实现,因此很好。
BehaviorSubject
使用Service
:通过如此多的嵌套,您实际上可以创建诸如EventService
之类的服务,然后创建可以由GrandParent直接订阅的BehaviorSubject
。另外,要使此service
更加特定于组件,您可以将此服务保留在module
中,该表将具有其他3个组件(GrandParent,Parent和Child)export class EventService{
private childClickedEvent = new BehaviorSubject<string>('');
emitChildEvent(msg: string){
this.childClickedEvent.next(msg)
}
childEventListner(){
return this.childClickedEvent.asObservable();
}
}
然后在
components
中:ChildComponent
export class ChildComponent{
constructor(private evtSvc: EventService){}
onClick(){
this.evtSvc.emitChildEvent('clicked a button')
}
}
GrandParent
export class GrandComponent{
constructor(private evtSvc: EventService){}
ngOnInit(){
this.evtSvc.childEventListner().subscribe(info =>{
console.log(info); // here you get the message from Child component
})
}
}
请注意,通过
@output
事件,您将创建组件的紧密耦合,因此会创建强依赖性( parent-child-grandchild )。如果该组件不可重用,并且仅创建用于此目的,那么@output
也将有意义,因为它将把消息传达给任何具有父子关系的新开发人员。创建服务以传递数据还将数据暴露给其他组件,这些组件可以将
service
注入(inject)constructor
。因此,应该相应地做出决定。