(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，父组件就收不到数据，只会知道事件发生了