Tengo un componente principal llamado program-page y tiene un componente secundario llamado elemento program-item Ahora tengo un botón en el program-item y lo que quiero que haga ese botón es llamar a una función en el componente principal. No lo soy. seguro de cómo haría yo algo como esto ..
programa-pagina.componente.html
<app-program-header></app-program-header> <app-week-display></app-week-display> <app-program-item [item]="programItem"></app-program-item>programa-pagina.componente.ts
someFunction()programa-elemento.componente.html
<button>click me</button> // button I want to be able to call event on parent componentSoy consciente de que podría usar un emisor de eventos, pero nunca antes había usado uno y no estoy seguro de cómo lo implementaría en este caso, no he visto ningún ejemplo en el que hacer clic en un botón en un componente secundario llame a una función en el padre.
¡Cualquier ayuda sería apreciada!
Angular tiene entrada y salida, que se pueden usar para proporcionar datos a un componente secundario y enviar eventos a un componente principal, respectivamente.
Puedes hacer algo como esto.
programa-pagina.componente.html
<app-program-header></app-program-header> <app-week-display></app-week-display> <app-program-item [item]="programItem" (someEvent)="someFunction($event)"></app-program-item>programa-elemento.componente.ts
import { EventEmitter } from '@angular/core'; .... @Output() someEvent = new EventEmitter();programa-elemento.componente.html
<button (click)="someEvent.emit('data')">click me</button>Ejemplo de uso primitivo de Stackblitz de entrada y salida