如果我有多个级别的 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

    因此,应该相应地做出决定

    10-07 15:29
    查看更多