news 2026/6/10 17:13:44

(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/10 13:21:09

深入 Flutter 自定义 RenderObject:打造高性能异形滚动列表

在 Flutter 开发中&#xff0c;ListView、GridView等通用滚动组件能满足 80% 的常规场景&#xff0c;但面对电商异形商品展示、社交 APP 个性化卡片流、数据可视化仪表盘等复杂 UI 需求时&#xff0c;仅靠组合现有 Widget 往往会遇到性能瓶颈或视觉效果限制。此时深入 Flutter …

作者头像 李华
网站建设 2026/6/10 2:17:38

33、分布式控制器设计与精确矩动力学计算

分布式控制器设计与精确矩动力学计算 1. 精确矩动力学计算示例 在定义配分函数的求和中,其缩减指标可以通过史密斯标准型以更系统的形式得到。假设矩阵 (P\in Z^{q\times n}) 表示 (n) 种物质的 (q) 个守恒定律。例如,在竞争结合示例中,(P = [1, 0, 0, 1, 1; 0, 1, 0, 1, …

作者头像 李华
网站建设 2026/6/10 13:19:46

35、机器学习在联合分类与分割及鲁棒凸优化中的应用

机器学习在联合分类与分割及鲁棒凸优化中的应用 联合分类与分割中的关键技术 在图像的联合分类与分割领域,涉及到诸多关键的理论和算法。 1. 线积分转换与能量流计算 - 最初有公式 $\frac{\partial E}{\partial \xi_i} = \int_{\hat{c}} [r_o(I (x), \hat{c}) - r_b(I (…

作者头像 李华
网站建设 2026/6/10 6:02:13

【大数据环境安装指南】ZooKeeper搭建Hadoop高可用集群教程

文章目录前言一、 核心架构说明二、 环境准备&#xff08;所有节点执行&#xff09;2.1 服务器规划&#xff08;3 节点&#xff09;2.2 基础环境初始化2.2.1 关闭防火墙和 SELinux&#xff08;所有节点&#xff09;2.2.2 配置主机名和 hosts 映射2.2.3 安装 JDK&#xff08;Had…

作者头像 李华
网站建设 2026/6/10 14:53:41

6、深入探索脚本条件判断与代码片段创建

深入探索脚本条件判断与代码片段创建 1. 条件判断基础操作 在脚本编写中,条件判断是实现脚本逻辑的关键部分。我们可以使用 JG 语句来检查文件和目录,以下是一个检查目录是否存在的示例: #!/bin/bash mydir=~/mydir if [ -d "$mydir" ]; thenecho "Dir…

作者头像 李华
网站建设 2026/6/10 14:53:19

16、利用AWK和Python进行数据处理与脚本编写

利用AWK和Python进行数据处理与脚本编写 1. 使用AWK优化lastlog输出 在处理 lastlog 命令的输出时,我们可能只对部分数据感兴趣,比如用户名和最后登录时间。AWK可以作为强大的数据过滤器,实现水平和垂直的数据过滤。 1.1 水平过滤行 通过将 lastlog 的输出通过管道传…

作者头像 李华