企业官网建设流程全解析

开始 │ ▼ 用户打开下拉框 │ ▼ 用户输入搜索(可选)│ ▼ 过滤 Test Type 列表 │ ▼ 用户勾选某个 Test Type │ ├── 如果该项未被选中 → 添加到 selectedTestType │ └── 如果该项已被选中 → 从 selectedTestType 移除 │ ▼ 显示当前 selectedTestType（UI更新） │ ▼ 用户点击 Apply Filter 按钮 │ ▼ 组件执行 applyFilter()│ ▼ 通过 @Output()将 selectedTestType 发送给父组件 │ ▼ 父组件接收到数据，更新自身状态或调用 API │ ▼ 流程结束

+---------------------+|开始|+---------------------+|v+---------------------+|用户打开下拉框|+---------------------+|v+---------------------+|用户输入搜索(可选)|+---------------------+|v+---------------------+|过滤 Test Type 列表|+---------------------+|v+-----------------------------+|用户勾选或取消 Test Type|+-----------------------------+|v+-----------------------------+|更新 selectedTestType|+-----------------------------+|v+-----------------------------+|用户点击 Apply Filter|+-----------------------------+|v+-----------------------------+|applyFilter()→ @Output()|+-----------------------------+|v+-----------------------------+|父组件接收 selectedTestType|+-----------------------------+|v+---------------------+|结束|+---------------------+

ng g c location-test-type

src/app/location-test-type/ ├── location-test-type.component.ts ├── location-test-type.component.html ├── location-test-type.component.css └── location-test-type.component.spec.ts

1. 编写组件逻辑

location-test-type.component.ts

import{Component, OnInit, Output, EventEmitter}from'@angular/core';interface TestTypeItem{name: string;value: string;checked?: boolean;}@Component({selector:'app-location-test-type', templateUrl:'./location-test-type.component.html', styleUrls:['./location-test-type.component.css']})exportclass LocationTestTypeComponent implements OnInit{// 搜索输入 searchText: string='';// 全部 Test Type 列表 testTypeList: TestTypeItem[]=[{name:'test1', value:'test1'},{name:'test2', value:'test2'},{name:'test3', value:'test3'}];// 用户选中的 Test Type selectedTestType: TestTypeItem[]=[];// 搜索后的列表 filteredTestTypeList: TestTypeItem[]=[];// 把选中数据 emit 给父组件 @Output()selected=new EventEmitter<TestTypeItem[]>();ngOnInit(): void{this.filteredTestTypeList=[...this.testTypeList];}// 选中 / 取消 toggleTestType(item: TestTypeItem){item.checked=!item.checked;const index=this.selectedTestType.findIndex(x=>x.name===item.name);if(item.checked&&index===-1){this.selectedTestType.push(item);}elseif(!item.checked&&index>-1){this.selectedTestType.splice(index,1);}}// 搜索search(){const text=this.searchText.toLowerCase();this.filteredTestTypeList=this.testTypeList.filter(item=>item.name.toLowerCase().includes(text));}// 应用 FilterapplyFilter(){// Emit 给父组件 this.selected.emit(this.selectedTestType);}}

location-test-type.component.html

<divclass="dropdown"><inputtype="text"placeholder="Search.."[(ngModel)]="searchText"(input)="search()"/><div *ngFor="let item of filteredTestTypeList"class="option"><inputtype="checkbox"[checked]="item.checked"(change)="toggleTestType(item)"/><label>{{item.name}}</label></div><button(click)="applyFilter()">Apply Filter</button><divclass="selected-items"><span *ngFor="let item of selectedTestType">{{item.name}}</span></div></div>

location-test-type.component.css

.dropdown{border: 1px solid#ccc;padding: 10px;width: 200px;}.option{display: flex;align-items: center;}.selected-items{margin-top: 10px;font-weight: bold;}

父组件使用

假设父组件是 app.component.html：

<app-location-test-type(selected)="onLocationTestTypeSelected($event)"></app-location-test-type>

父组件 app.component.ts：

onLocationTestTypeSelected(selected: any[]){console.log('父组件收到选中数据:', selected);}

优点：

• 逻辑完全独立，便于维护

• 支持搜索、选中、取消和 Apply Filter

• 数据通过 @Output() 回传父组件

• 可直接扩展到多选下拉或 Location Test Type 场景