Angular 自定义下拉列表组件实现

本文主要介绍了如何在Angular应用中实现下拉列表组件的两种方法，针对在页面中频繁使用下拉列表的情况，提供了一种组件化的解决方案。 在Angular开发过程中，经常会遇到需要创建下拉列表（dropdown）的需求。初始的简单方法是通过前端向服务器请求数据，然后使用`<select>`和`<option>`标签在HTML模板中显示这些数据。然而，这种方法可能会导致大量重复的代码，如初始化数据的方法和模板中的内容。以下是一个简单的示例： ```typescript // 初始化年级选项 initGradeOptions() { this.gradeService.getAll().subscribe((res) => { this.gradeOptions = res; }, () => { console.log('获取年级选项错误'); }); } // HTML模板部分 <nz-select nzPlaceHolder="请选择所属年级" formControlName="grade"> <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name" [nzValue]="grade"></nz-option> </nz-select> ``` 当多个地方需要使用相同的下拉列表时，这种做法显得不够高效。因此，可以考虑将下拉列表封装为一个自定义组件，以实现代码复用。这里借鉴了朴世超组长关于Angular输入与输出的思路，组件化的方法如下： 首先，在组件的TypeScript类中，我们定义了输入属性`@Input() defaultValue: Grade;`用于接收父组件传入的默认选中值，以及输出属性`@Output() selected = new EventEmitter<number>();`用于将用户选择的新值发送回父组件。同时，我们还需要一个`datas: Grade[];`数组来存储所有可选项的数据。 ```typescript import { Component, Input, Output, EventEmitter } from '@angular/core'; import { GradeService } from './grade.service'; // 假设这是获取年级数据的服务 @Component({ selector: 'app-grade-select', template: ` <nz-select nzPlaceHolder="所属年级" class="wide" [(ngModel)]="defaultValue" (ngModelChange)="dataChange()"> <nz-option *ngFor="let grade of datas" [nzLabel]="grade.name" [nzValue]="grade"></nz-option> </nz-select> `, }) export class GradeSelectComponent { @Input() defaultValue: Grade; @Output() selected = new EventEmitter<number>(); datas: Grade[]; constructor(private gradeService: GradeService) {} ngOnInit() { this.gradeService.getAll().subscribe((res) => { this.datas = res; }, () => { console.log('错误'); }); } dataChange() { this.selected.emit(this.defaultValue.id); // 发射选中项的id } } ``` 在组件的HTML模板中，我们使用双向数据绑定 `(ngModel)` 和 `(ngModelChange)` 来同步组件内部的选中值，并在选中项改变时触发`dataChange()`方法，通过`@Output`发射新的选中值。 这样，父组件只需要引入`GradeSelectComponent`，并通过`@Input`传递默认值，通过`@Output`监听选中值的变化，就可以在多个地方方便地使用这个下拉列表组件，避免了重复编写相同代码的问题，提高了代码的可维护性和复用性。