Angular中ng-content投影选项时compareWith函数未触发问题排查

通过ng-content投影的<option>属于父组件的模板上下文，而子组件<select>上的compareWith函数是子组件的方法。Angular在处理<select>的选项匹配逻辑时，只会对组件内部模板声明的<option>应用compareWith，投影过来的<option>因为归属父组件视图，不会触发子组件的compareWith函数。

推荐采用子组件接收选项数据+内部渲染选项的方式，确保<option>和<select>处于同一组件上下文，让compareWith正常生效：

1. 子组件改造 #

• 新增@Input()接收选项数据
• 内部通过*ngFor渲染<option>

子组件代码（TypeScript）：

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

@Component({
  selector: 'custom-select',
  templateUrl: './custom-select.component.html'
})
export class CustomSelectComponent {
  @Input() options: Array<{id: number, name: string}> = [];
  selectedValue = { id: 1, name: 'Janik' }; // 初始选中值

  compareB(o1: {id: number}, o2: {id: number}): boolean {
    return o1 && o2 ? o1.id === o2.id : o1 === o2;
  }
}

子组件模板（HTML）：

<select matNativeControl [(ngModel)]="selectedValue" [compareWith]="compareB">
  <option *ngFor="let opt of options" [ngValue]="opt">{{ opt.name }}</option>
</select>

2. 父组件调用 #

直接传递选项数组给子组件即可：

<custom-select [options]="names"></custom-select>

如果需要保留自定义选项模板的灵活性，也可以用ng-template传递模板，让子组件内部渲染（确保选项处于子组件上下文）：

父组件传递模板 #

<custom-select [options]="names">
  <ng-template let-option>
    <option [ngValue]="option">{{ option.name }}</option>
  </ng-template>
</custom-select>

子组件渲染模板 #

子组件TypeScript新增模板引用：

@ContentChild(TemplateRef) optionTemplate!: TemplateRef<any>;

子组件模板修改为：

<select matNativeControl [(ngModel)]="selectedValue" [compareWith]="compareB">
  <ng-container *ngFor="let opt of options">
    <ng-template [ngTemplateOutlet]="optionTemplate" [ngTemplateOutletContext]="{$implicit: opt}"></ng-template>
  </ng-container>
</select>

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