企业官网建设流程全解析

如何在阿里云部署网站,安阳吧,舞阳网站建设,wordpress访问开始│▼ 用户打开下拉框│▼ 用户输入搜索 (可选)│▼ 过滤 Test Type 列表│▼ 用户勾选某个 Test Type│├── 如果该项未被选中 → 添加到 selectedTestType│└── 如果该项已被选中 → 从 selectedTestType 移除│▼ 显示当前 selectedTestType#xff08;UI更新…开始 │ ▼ 用户打开下拉框 │ ▼ 用户输入搜索(可选)│ ▼ 过滤 Test Type 列表 │ ▼ 用户勾选某个 Test Type │ ├── 如果该项未被选中 → 添加到 selectedTestType │ └── 如果该项已被选中 → 从 selectedTestType 移除 │ ▼ 显示当前 selectedTestTypeUI更新 │ ▼ 用户点击 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-typesrc/app/location-test-type/ ├── location-test-type.component.ts ├── location-test-type.component.html ├── location-test-type.component.css └── location-test-type.component.spec.ts1. 编写组件逻辑location-test-type.component.tsimport{Component, OnInit, Output, EventEmitter}fromangular/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()selectednew EventEmitterTestTypeItem[]();ngOnInit(): void{this.filteredTestTypeList[...this.testTypeList];}// 选中 / 取消 toggleTestType(item: TestTypeItem){item.checked!item.checked;const indexthis.selectedTestType.findIndex(xx.nameitem.name);if(item.checkedindex-1){this.selectedTestType.push(item);}elseif(!item.checkedindex-1){this.selectedTestType.splice(index,1);}}// 搜索search(){const textthis.searchText.toLowerCase();this.filteredTestTypeListthis.testTypeList.filter(itemitem.name.toLowerCase().includes(text));}// 应用 FilterapplyFilter(){// Emit 给父组件 this.selected.emit(this.selectedTestType);}}location-test-type.component.htmldivclassdropdowninputtypetextplaceholderSearch..[(ngModel)]searchText(input)search()/div *ngForlet item of filteredTestTypeListclassoptioninputtypecheckbox[checked]item.checked(change)toggleTestType(item)/label{{item.name}}/label/divbutton(click)applyFilter()Apply Filter/buttondivclassselected-itemsspan *ngForlet item of selectedTestType{{item.name}}/span/div/divlocation-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.htmlapp-location-test-type(selected)onLocationTestTypeSelected($event)/app-location-test-type父组件 app.component.tsonLocationTestTypeSelected(selected: any[]){console.log(父组件收到选中数据:, selected);}优点逻辑完全独立便于维护支持搜索、选中、取消和 Apply Filter数据通过 Output() 回传父组件可直接扩展到多选下拉或 Location Test Type 场景