news 2026/6/8 22:01:52

(appliedFilter)=“onAppliedFilter($event)“ 中$event 的使用介绍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
(appliedFilter)=“onAppliedFilter($event)“ 中$event 的使用介绍

1. $event 是什么

在 Angular 中,父组件通过事件绑定接收子组件的事件:

<app-scheduling-filter(appliedFilter)="onAppliedFilter($event)"></app-scheduling-filter>
  • (appliedFilter) → 监听子组件 @Output() 发出的事件

-== $event → 子组件发出的事件数据,自动传递给父组件==

  • 作用:父组件可以接收到子组件传递的数据。

2. 子组件如何发出事件

在子组件 app-scheduling-filter 中:

// scheduling-filter.component.tsimport{Component,Output,EventEmitter}from'@angular/core';@Component({...})exportclassSchedulingFilterComponent{@Output()appliedFilter=newEventEmitter<any>();applyFilter(){constfilterData={testTypes:['DRE'],location:'NY'};this.appliedFilter.emit(filterData);// 发出事件并传递数据}}

解释:

  • @Output() appliedFilter = new EventEmitter();

  • 声明一个事件 appliedFilter,父组件可以监听

  • this.appliedFilter.emit(filterData);

  • 发射事件,并把 filterData 传递出去

3. 父组件接收事件

// parent.component.tsonAppliedFilter(event:any){console.log(event);// { testTypes: ['DRE'], location: 'NY' }}
  • 父组件在模板中写 (appliedFilter)=“onAppliedFilter($event)”

  • $event 就是子组件 emit() 发出的数据

  • 父组件通过 $event 获取子组件传来的信息

总结

  • $event 是 子组件传递给父组件的数据

  • 事件绑定 (appliedFilter)=“onAppliedFilter($event)” 可以让父组件接收并处理子组件的数据

  • 如果你不写 $event,父组件就收不到数据,只会知道事件发生了

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/8 18:12:30

基于STM32与机智云平台的智能台灯系统设计与实现

基于STM32与机智云平台的智能台灯系统设计与实现 摘要 本文设计并实现了一种基于STM32F103C8T6单片机与机智云平台的智能台灯系统。该系统整合了多维环境感知与智能照明控制功能,通过DHT11温湿度传感器(精度:温度2℃、湿度5%)、HC-SR04超声波传感器(测距范围2-400cm,精…

作者头像 李华
网站建设 2026/6/8 11:08:16

阻塞队列:三组核心方法全对比

深入解析阻塞队列&#xff1a;三组核心方法全对比与实战指南引言&#xff1a;为什么需要阻塞队列&#xff1f;在多线程编程中&#xff0c;线程间的数据共享和通信是一个常见而复杂的问题。传统的共享变量方式需要开发者手动处理线程同步、等待/通知机制&#xff0c;这既容易出错…

作者头像 李华
网站建设 2026/6/7 1:59:54

性能测试实战:混合场景与稳定性测试详解

性能测试实战&#xff1a;混合场景与稳定性测试详解一、性能测试场景实战回顾1. 单接口基准测试&#xff08;已完成&#xff09;目的&#xff1a;寻找单个接口的性能拐点&#xff08;最佳并发 & 最大TPS&#xff09;。策略&#xff1a;从小并发&#xff08;如10&#xff09…

作者头像 李华
网站建设 2026/6/7 9:18:29

37、高阶多智能体系统具有对抗交互和切换拓扑的二分共识研究

高阶多智能体系统具有对抗交互和切换拓扑的二分共识研究 1. 引言 在过去的10 - 15年里,多智能体系统和共识问题受到了广泛关注。多数研究假设智能体通过协作来达成共识,即它们为了共同目标交换信息。然而,在许多实际场景中,两个智能体可能将彼此视为对手,即便能获取对方…

作者头像 李华
网站建设 2026/5/29 8:21:04

10、函数与流编辑器的使用指南

函数与流编辑器的使用指南 在脚本编写的世界里,函数和流编辑器是两个强大的工具,它们能显著提升脚本的效率和可维护性。下面将详细介绍函数的使用以及流编辑器的相关内容。 函数的使用 1. 数组传递 在函数调用时,并非所有传递的值都是单个值,有时需要传递数组。以下是传…

作者头像 李华
网站建设 2026/6/3 17:49:51

交通信号仿真软件:Vistro_(2).交通信号控制基础理论

交通信号控制基础理论 1. 交通信号控制的基本概念 交通信号控制是指通过信号灯的红、黄、绿三种颜色的变化&#xff0c;来指导和管理交通流的运行。这种控制方式可以有效地减少交通拥堵&#xff0c;提高道路的通行能力&#xff0c;确保交通安全。在交通信号仿真软件中&#xff…

作者头像 李华