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->下次初始化恢复写法：
.map(…).filter(Boolean) → 格式化数组
.some(…) → 判断数组中是否存在某个元素
.map(t => ({ …t })) → 深拷贝对象
业务逻辑：
初始化历史选中
用户操作更新 selectedTestType
页面显示和数据状态同步
传递选中数据给父组件
保存历史选中供下次恢复
