点击儿童时如何从父母那里调用方法？

Question

我有两个组成部分，父母和孩子。在孩子我有按钮。当用户点击子节点中的那个按钮时，我想要调用父节点中的方法。有什么建议吗？

Answer 1

这是非常基本的角度，您可以通过https://angular.io上的指南找到大量示例。

但如果您仍然找不到它，则必须使用@Output装饰器，为其设置EventEmitter字段，并在单击按钮时调用emit。这样，您可以使用事件符号()：

从父级附加到它

<强>父

@Component({
   selector: 'parent',
   template: `<child (buttonClick)="onButtonClick($event)"></child>`
})
export class ParentComponent {

   public onButtonClick(event: MouseEvent): void {
      // ...
   }

}

儿童

@Component({
    selector: 'child',
    template: `<button (click)="buttonClick.emit($event)"></button>`
})
export class ChildComponent {

   @Output()
   public buttonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

}