我有一个父组件program-page，它有一个子组件，program-item现在我在上有一个按钮，program-item而我希望该按钮要做的就是在父组件上调用一个函数。我不确定如何做这样的事情。 。
program-page.component.html
<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>
程序页面.component.ts
someFunction()
program-item.component.html
<button>click me</button> // button I want to be able to call event on parent component
我知道我可以使用一个事件发射器，但是我以前从未使用过它，并且不确定在这种情况下如何实现它，我还没有看到任何在子组件上单击一个按钮在父组件上调用一个函数的示例。
任何帮助，将不胜感激！
Angular具有Input和Output，可用于将数据提供给子组件并将事件发送到父组件。
你可以做这样的事情。
program-page.component.html
<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem" (someEvent)="someFunction(data)"></app-program-item>
program-item.component.ts
import { EventEmitter } from '@angular/core';
....
@Output() someEvent = new EventEmitter();
program-item.component.html
<button (click)="someEvent.emit('data')">click me</button>
输入和输出Stackblitz示例的原始用法
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句