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

Question

我有一个名为 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>

program-page.component.ts

someFunction()

program-item.component.html

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

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

如有任何帮助，我们将不胜感激!

Answer 1

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($event)"></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 example