将事件从子组件传递到父组件Angular 5

Question

我有一个调用的父组件program-page,它有一个名为program-itemnow 的子组件,我有一个按钮,program-item我希望该按钮做的是调用父组件上的一个函数..我不知道我会怎么做这样的事情. .

程序page.component.html

<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>

程序page.component.ts

someFunction()

程序item.component.html

<button>click me</button> // button I want to be able to call event on parent component

我知道我可以使用一个事件发射器,但我以前从未使用过一个并且不确定在这种情况下我将如何实现它,我还没有看到任何一个示例,其中单击子组件上的按钮调用父项上的函数

任何帮助,将不胜感激!

Answer 1

Angular具有输入和输出,可用于向子组件提供数据并分别将事件发送到父组件.

你可以做这样的事情.

程序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>

程序page.component.ts

import { EventEmitter } from '@angular/core';
....
@Output() someEvent = new EventEmitter();

程序item.component.html

<button (click)="someEvent.emit('data')">click me</button>

输入和输出Stackblitz示例的原始用法