将子组件中的事件传递给父组件 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

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

非常感谢提供帮助！

- Smokey Dawson

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 示例

- Pavan Bahuguni

---

在program-page.component.html中，如果您想访问数据，实际上应该是(someEvent)="someFunction($event)"。 - Sinandro

看起来 @Output() 变量在这里是在父组件中定义的。但在给定的链接中，它在子组件中定义。哪一个是正确的？ - Nikhil Nanjappa

@NikhilNanjappa 你是对的，应该在子组件中，stackblitz示例是正确的。已编辑答案。 - Pavan Bahuguni