当前位置：首页 > news >正文

初始化 → 用户操作 → 已选列表更新 → 事件传递父组件 → 保存历史的整个数据流详细介绍

news 2026/5/12 14:39:37

import{Component,OnInit,Output,EventEmitter}from'@angular/core';@Component({selector:'app-scheduling-filter',// 组件选择器，用于在父组件模板中使用 <app-scheduling-filter>templateUrl:'./scheduling-filter.component.html',styleUrls:['./scheduling-filter.component.css']})exportclassSchedulingFilterComponentimplementsOnInit{@Output()appliedFilter=newEventEmitter<any>();// 子组件向父组件发射事件，传递用户选择的过滤条件// 父组件可以在模板中通过 (appliedFilter)="父组件方法($event)" 监听// 模拟 Test Type 数据testTypeList=[{name:'BDS',value:'BDS',checked:false},{name:'DRE',value:'DRE',checked:false},{name:'MRI',value:'MRI',checked:false}];// 每个测试类型包含 name、value 和 checked 属性// checked 用于控制 checkbox 是否选中selectedTestType:any[]=[];// 用户选中的测试类型列表searchedTestType:any[]=[];// 可以用于搜索过滤后的列表（当前例子初始化为全量列表）previousAppliedFilters:any={testType:['BDS']// 模拟历史选中的测试类型};ngOnInit():void{// 生命周期钩子，组件初始化时执行if(this.previousAppliedFilters.testType?.length){// 如果有历史选中值，则初始化 selectedTestTypethis.selectedTestType=this.previousAppliedFilters.testType.map((t:any)=>{if(typeoft==='string')return{name:t,value:t,checked:true};// 字符串类型，生成对象并标记 checkedif(t?.name)return{...t,checked:true};// 已是对象类型，保持原属性并标记 checkedreturnnull;// 其他情况过滤掉}).filter(Boolean);// 去掉 null 或 undefined// 同步 testTypeList 的 checked 状态，确保页面显示正确this.testTypeList.forEach(item=>{item.checked=this.selectedTestType.some(sel=>sel.name===item.name);// some() 判断 selectedTestType 中是否存在该 name});// 初始化搜索列表（目前为全量 testTypeList）this.searchedTestType=[...this.testTypeList];}}onChecked(event:any,selectedFilter:string){// 用户点击 checkbox 时触发// event -> 当前点击的测试类型对象// selectedFilter -> 类型标识，例如 'testType'consttargetList=selectedFilter==='testType'?this.selectedTestType:[];// 选择要操作的目标数组（这里是 selectedTestType），方便扩展其他 filter 类型this.testTypeList.forEach(item=>{if(item.name===event.name){item.checked=!item.checked;// 切换 checkbox 状态}});// 更新 selectedTestType，只保留 checked = true 的项this.selectedTestType=this.testTypeList.filter(item=>item.checked);}removeTestType(item:any){// 点击已选项的 × 按钮，取消选中item.checked=false;// 取消 checkboxthis.selectedTestType=this.selectedTestType.filter(sel=>sel.name!==item.name);// 更新 selectedTestType}applyFilter(){// 点击 Apply Filter 按钮，向父组件传递数据console.log('Apply Filter Selected:',this.selectedTestType);this.appliedFilter.emit({testType:this.selectedTestType.map(t=>({...t}))// 浅拷贝对象，防止父组件修改子组件数据});// 保存历史选中，供下次初始化恢复this.previousAppliedFilters.testType=this.selectedTestType.map(t=>t.name);}}

<div><h3>Test Type Filter</h3><!--遍历 testTypeList 显示 checkbox--><div*ngFor="let item of testTypeList"><input type="checkbox"[checked]="item.checked"<!--根据对象 checked 属性控制 checkbox 是否选中-->(change)="onChecked(item, 'testType')"/><!--点击 checkbox 调用 onChecked-->{{item.name}}</div><!--显示已选中的测试类型--><div><h4>Selected Test Types:</h4><span*ngFor="let item of selectedTestType">{{item.name}}<button(click)="removeTestType(item)">×</button><!--点击 × 调用 removeTestType--></span></div><!--应用过滤条件按钮--><button(click)="applyFilter()">Apply Filter</button></div>

解释：

this.previousAppliedFilters.testType

表示之前保存的已选测试类型，比如：[‘BDS’]

.map((t: any) => { … })

遍历历史数组，把历史值转换为标准对象格式，并标记 checked: true
逻辑：
- 如果 t 是字符串 → 转为对象 { name: t, value: t, checked: true }
- 如果 t 已经是对象且有 name → 保留原对象，并加上 checked: true
- 其他情况 → 返回 null

.filter(Boolean)

过滤掉 null 或 undefined
结果：selectedTestType 只包含有效对象

✅业务逻辑：把历史选中项标准化为 { name, value, checked } 结构，并记录选中状态，以便页面渲染。

2. 同步 testTypeList 的选中状态

item.checked=this.selectedTestType.some(sel=>sel.name===item.name);

解释：

遍历原始 testTypeList
some(sel => sel.name === item.name)
- 检查 selectedTestType 中是否有和当前 item 同名的选中项
- 返回 true → 表示选中
- 返回 false → 表示未选中
赋值给 item.checked → 确保 checkbox 页面显示正确

✅ 业务逻辑：把历史选中状态同步到页面显示的 checkbox 上。

3. 触发事件向父组件传数据

this.appliedFilter.emit({testType:this.selectedTestType.map(t=>({...t}))// 深拷贝});

解释：

this.appliedFilter

子组件定义的 @Output() 事件

父组件可以在模板中通过 (appliedFilter)=“onAppliedFilter($event)” 监听

.emit({…})

发射事件，把数据传给父组件

this.selectedTestType.map(t => ({ …t }))

把 selectedTestType 里的对象做浅/深拷贝，防止父组件修改后影响子组件

这里使用 { …t } 复制对象属性

✅ 业务逻辑：将当前选中的测试类型传递给父组件，让父组件知道用户选择了哪些项。

4. 保存历史选中

this.previousAppliedFilters.testType=this.selectedTestType.map(t=>t.name);

解释：

selectedTestType.map(t => t.name) → 只取名称数组
保存到 previousAppliedFilters.testType
这样下次组件初始化时可以恢复用户的历史选择

✅ 业务逻辑：记录用户选择，支持刷新或重新打开页面时保留历史状态。

5. 数据传递流程总结

初始化：

读取 previousAppliedFilters.testType

转换成 { name, value, checked } 对象

更新 selectedTestType 和 testTypeList 的 checked

用户操作 checkbox：

(change) 触发 onChecked(item, ‘testType’)

切换 item.checked

更新 selectedTestType

删除已选项：

点击 × 调用 removeTestType(item)

取消 item.checked

更新 selectedTestType

应用筛选：

点击 Apply Filter 调用 applyFilter()

发射 appliedFilter 事件 → 父组件接收 $event

保存历史选中到 previousAppliedFilters.testType

可视化理解

历史选中->初始化 selectedTestType selectedTestType->同步 testTypeList.checked->页面 checkbox 显示 用户点击 checkbox->onChecked->切换 item.checked->更新 selectedTestType 用户点击 ×->removeTestType->更新 selectedTestType 用户点击 Apply Filter->appliedFilter.emit(selectedTestType)->父组件接收 selectedTestType->保存到 previousAppliedFilters.testType->下次初始化恢复