Angular Material自定义Autocomplete组件封装技术问询

我来帮你把这个自定义的Angular Material自动完成组件封装成通用可复用的版本，结合你提到的清除按钮、自定义箭头以及适配mat-form-field的需求，给你一步步落地实现：

首先生成一个新的Angular组件（比如叫custom-autocomplete），然后在组件类里定义必要的输入输出属性，让它能接收外部传入的选项、占位符，同时对外暴露选中事件：

import { Component, Input, Output, EventEmitter, ViewChild, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  selector: 'app-custom-autocomplete',
  templateUrl: './custom-autocomplete.component.html',
  styleUrls: ['./custom-autocomplete.component.scss']
})
export class CustomAutocompleteComponent implements OnInit {
  @Input() placeholder: string = '';
  @Input() options: string[] = [];
  @Output() optionSelected = new EventEmitter<string>();
  
  control = new FormControl();
  filteredOptions: string[] = [];
  
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;

  ngOnInit(): void {
    this.filterOptions();
    this.control.valueChanges.subscribe(() => this.filterOptions());
  }

  private filterOptions(): void {
    const filterValue = this.control.value?.toLowerCase() || '';
    this.filteredOptions = this.options.filter(option => 
      option.toLowerCase().includes(filterValue)
    );
  }

  onOptionSelected(option: string): void {
    this.optionSelected.emit(option);
  }

  clearInput(): void {
    this.control.setValue('');
    this.optionSelected.emit('');
  }
}

模板里要把mat-form-field、输入框、mat-autocomplete以及清除按钮整合起来，绑定好相关属性：

<mat-form-field appearance="outline">
  <input 
    type="text"
    matInput
    [formControl]="control"
    [matAutocomplete]="auto"
    [placeholder]="placeholder"
  >
  
  <!-- 自定义清除按钮 -->
  <button 
    mat-icon-button 
    matSuffix 
    (click)="clearInput()"
    *ngIf="control.value"
  >
    <mat-icon>clear</mat-icon>
  </button>
  
  <!-- mat-autocomplete 面板 -->
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event.option.value)">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

在组件的SCSS文件里覆盖mat-form-field默认的下拉箭头样式，换成你想要的自定义箭头：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-suffix .mat-select-arrow {
  /* 隐藏默认箭头 */
  display: none;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-suffix::after {
  /* 自定义箭头样式，可根据需求调整 */
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #666;
  margin-top: 2px;
}

/* 聚焦状态下的箭头样式变化 */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-suffix::after {
  border-top-color: #1976d2;
}

为了让组件更灵活，你还可以添加更多可配置项：

• 添加@Input() disabled: boolean来控制组件禁用状态
• 支持传入复杂对象作为选项，定义@Input() displayWith: (value: any) => string来自定义显示文本
• 允许自定义清除按钮的图标或样式

比如修改组件类支持复杂对象：

@Input() options: any[] = [];
@Input() displayWith: (value: any) => string = (value) => value?.toString() || '';

同时在模板里更新mat-autocomplete的绑定：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith" (optionSelected)="onOptionSelected($event.option.value)">

在父组件里引入这个自定义组件，传入选项和占位符即可：

<app-custom-autocomplete
  placeholder="选择一个选项"
  [options]="['选项1', '选项2', '选项3']"
  (optionSelected)="handleOptionSelected($event)"
></app-custom-autocomplete>

这样你就得到了一个可复用、带清除按钮和自定义箭头的mat-autocomplete组件，完全适配mat-form-field的外观和行为。

内容的提问来源于stack exchange，提问作者Alex Beugnet