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

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

任何帮助都将不胜感激!

推荐答案

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

你可以这样做.

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>

输入和输出的原始用法

Typescript相关问答推荐

如何使类型只能有来自另一个类型的键,但键可以有一个新值,新键应该抛出一个错误

SortKey类型不起作用,尽管它使用的单个类型工作正常<>'

打印脚本中的动态函数重载

了解类型规则中的关键字

为什么在这个例子中,我把缺少的属性添加到对象中时,TypeScrip没有拾取,如何修复?

在函数中打字推断记录的关键字

在实现自定义主题后,Angular 不会更新视图

等待用户在Angular 函数中输入

React Typescript项目问题有Redux-Toolkit userSlice角色问题

如何在Reaction Query Builder中添加其他字段?

AngularJS服务不会解析传入的Json响应到管道中的模型

如何在ANGLE中注册自定义验证器

在列表的指令中使用intersectionObservable隐藏按钮

尽管对象的类型已声明,但未解析的变量<;变量

APP_INITIALIZER在继续到其他Provider 之前未解析promise

有没有一种方法可以防止我的组件包在其中安装样式组件'; node 模块中的s目录

如何提取具有索引签名的类型中定义的键

如何在TypeScript中声明逆变函数成员?

我应该使用服务方法(依赖于可观察的)在组件中进行计算吗?

当受其他参数限制时,通用参数类型不会缩小