问题描述
如果我有多个级别的角度分量,如何使用@Output
事件从子级向大级父级发出动作?
If I have multiple levels of angular components, how can I use @Output
to event emit an action from child to the grand parent?
祖父母:
<parent (handleClick)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
console.log('grandma knows you clicked')
}
父母:
<child (handleClick)="handleClick($event)">
</child>
孩子:
<div (click)="onClick">Click button
</div>
...
@Output() handleClick = new EventEmitter
onClick() {
this.handleClick.emit('clicked a button')
}
我正在尝试使用它,以便@Output可以深入钻探一些组件,实现此目的的最佳方法是什么,您可以提供示例吗?
I am trying to have it so that @Output can prop drill a few components deep, whats the best way to accomplish this, and can you provide example?
推荐答案
可能有2种方法:
- 使用
@output
:
祖父母
<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')
}
孩子已在代码中正确实现,因此很方便.
Child is implemented properly in the code so it is good to go.
- 通过
Service
使用BehaviorSubject
:通过这么多的嵌套,您实际上可以创建诸如EventService
的某些服务,然后创建可以由GrandParent直接订阅的BehaviorSubject
.另外,要使该service
组件更加特定,您可以将该服务保留在module
中,该服务将具有其他3个组件(GrandParent,Parent和Child)
- Using
BehaviorSubject
viaService
: With this much level of nesting, you can actually create some service likeEventService
, and then createBehaviorSubject
which can directly be subscribed by the GrandParent. Also, to make thisservice
more component specific, you can keep this service in amodule
which will have other 3 components (GrandParent, Parent and 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
也是有意义的,因为它将把消息传达给任何具有父子关系的新开发人员.
Please note that, with @output
event, you create a tight coupling of components and so a strong dependency (parent-child-grandchild) is created. If the component are not reusable and are only created to serve this purpose, then @output
will also make sense because it'll convey the message to any new developer that they have parent-child relationship.
创建服务以传递数据还将数据暴露给可以在constructor
中注入service
的其他组件.
Creating a service to pass data also exposes the data to other components which can inject service
in constructor
.
因此,应据此做出决定.
这篇关于如何以现代角度将事件从孙子孙女传给祖父母?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!