Angular通用Autocomplete组件传入mat-options后键盘导航失效求助

核心原因 #

动态传入的自定义mat-option未被Autocomplete组件的内部导航系统注册，导致键盘箭头事件无法识别这些选项。

解决方案步骤 #

1. 确保自定义mat-option绑定value属性 #

每个动态传入的选项必须明确绑定[value]，这是Autocomplete追踪选中项的核心标识：

<!-- 自定义多字段选项示例 -->
<mat-option [value]="item">
  <div class="custom-option-layout">
    <span class="option-title">{{ item.title }}</span>
    <span class="option-subtitle">{{ item.subtitle }}</span>
  </div>
</mat-option>

2. 手动注册投影选项到Autocomplete #

通过@ContentChildren获取所有传入的mat-option，在组件初始化时手动注册到Autocomplete实例：

import { Component, ContentChildren, AfterContentInit, ViewChild, QueryList } from '@angular/core';
import { MatAutocomplete, MatOption } from '@angular/material/autocomplete';

@Component({
  selector: 'app-generic-autocomplete',
  templateUrl: './generic-autocomplete.component.html',
})
export class GenericAutocompleteComponent implements AfterContentInit {
  @ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;
  @ContentChildren(MatOption) projectedOptions!: QueryList<MatOption>;

  ngAfterContentInit(): void {
    // 初始化注册所有投影选项
    this.registerOptions(this.projectedOptions);
    // 监听选项集合变化，动态注册新增选项
    this.projectedOptions.changes.subscribe(options => this.registerOptions(options));
  }

  private registerOptions(options: QueryList<MatOption>): void {
    options.forEach(option => {
      // 非MDC版本的Autocomplete支持此私有方法完成选项注册
      if (!this.autocomplete._options.has(option)) {
        this.autocomplete._registerOption(option);
      }
    });
  }
}

3. 避免阻断键盘事件冒泡 #

检查自定义选项内部的元素，确保没有调用event.stopPropagation()或event.preventDefault()，否则会阻断Autocomplete的键盘导航事件传递。

额外注意事项 #

• 不要给自定义mat-option添加tabindex属性，避免干扰内置导航逻辑。
• 确保所有mat-option直接嵌套在mat-autocomplete内部，不要被额外的容器（如普通div）隔离。

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