如何让Angular Material识别子组件<mat-option>，完成父子自动完成组件集成？

问题背景 #

基于Angular Material Autocomplete实现动态数据与UI的自动完成组件，要求前两行选项的样式、数据与其余选项区分开。已通过服务实现业务逻辑，但当前架构下，Angular Material无法识别嵌套在子组件（如nw-auto-completable-card）中的mat-option。

核心原因 #

mat-autocomplete需要直接的mat-option作为子元素，而通过<ng-content>投影的子组件会将mat-option包裹在自身组件内部，导致mat-autocomplete无法直接检测到这些选项元素。

解决方案 #

方法1：父组件通过ContentChildren收集所有MatOption #

修改父组件逻辑，用ContentChildren递归获取所有子组件中的MatOption实例，关联到mat-autocomplete：

1. 父组件TS代码：

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

@Component({
  selector: 'nw-auto-completable-input',
  templateUrl: './auto-completable.component.html'
})
export class NwAutoCompletableInputComponent implements AfterContentInit {
  myControl = new FormControl('');
  @ViewChild('auto') autocomplete!: MatAutocomplete;
  @ContentChildren(MatOption, { descendants: true }) options!: QueryList<MatOption>;

  ngAfterContentInit(): void {
    // 初始化关联选项
    this.autocomplete.options.reset(this.options);
    // 监听选项变化
    this.options.changes.subscribe(() => {
      this.autocomplete.options.reset(this.options);
    });
  }
}

2. 父组件HTML（保持原结构）：

<tsn-input type="text"
           placeholder="Pick one"
           aria-label="Number"
           label="number"
           [formControl]="myControl"
           [matAutocomplete]="auto"></tsn-input>
<mat-autocomplete #auto="matAutocomplete">
  <ng-content></ng-content>
</mat-autocomplete>

方法2：子组件直接输出带自定义样式的mat-option（推荐） #

让子组件负责自身的选项数据与样式，直接输出mat-option，无需额外处理即可被mat-autocomplete识别：

1. 子组件（nw-auto-completable-card）HTML：

<mat-option *ngFor="let item of cardOptions; let i = index" [value]="item">
  <div [class.special-option]="i < 2">{{ item }}</div>
</mat-option>

2. 子组件TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'nw-auto-completable-card',
  templateUrl: './auto-completable-card.component.html',
  styles: [`
    .special-option {
      background-color: #f0f8ff;
      font-weight: 600;
    }
  `]
})
export class NwAutoCompletableCardComponent {
  // 模拟动态数据，可从服务获取
  cardOptions = ['65165486451', '65165486451', '常规选项1', '常规选项2'];
}

3. 父组件调用方式不变：

<nw-auto-completable-input>
  <nw-auto-completable-card></nw-auto-completable-card>
  <nw-auto-completable-deposit></nw-auto-completable-deposit>
</nw-auto-completable-input>

说明 #

• 方法1通过descendants: true参数递归查找所有子组件内的MatOption，确保mat-autocomplete能检测到所有选项。
• 方法2更贴合组件化设计，子组件独立管理自身的选项数据与样式，逻辑清晰且易于维护。

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