Question

我有一个名为program-page的父组件，它有一个名为program-item的子组件，现在我在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 example

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

1 个答案: