如何以现代角度将事件从孙子孙女传给祖父母? [英] How to emit an event from grandchildren to grandparent in modern angular?

问题描述

如果我有多个级别的角度分量，如何使用@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种方法:

1. 使用@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.

1. 通过Service使用BehaviorSubject:通过这么多的嵌套，您实际上可以创建诸如EventService的某些服务，然后创建可以由GrandParent直接订阅的BehaviorSubject.另外，要使该service组件更加特定，您可以将该服务保留在module中，该服务将具有其他3个组件(GrandParent，Parent和Child)

1. Using BehaviorSubject via Service: With this much level of nesting, you can actually create some service like EventService, and then create BehaviorSubject which can directly be subscribed by the GrandParent. Also, to make this service more component specific, you can keep this service in a module 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.

因此，应据此做出决定.

这篇关于如何以现代角度将事件从孙子孙女传给祖父母?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！