当我点击孩子时如何从父母调用方法?

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>();
}