如何为mat-select组件的选中选项自定义显示模板？

mat-select默认只会提取mat-option内的纯文本内容渲染到顶部选择框，不会同步保留选项里自定义的HTML结构、内联样式，所以写在option里的带颜色span不会在选中后生效。直接用官方提供的mat-select-trigger指令就能实现自定义，是官方原生支持的方案，没有版本兼容问题。

实现步骤 #

在<mat-select>标签内部，添加挂载了*matSelectTrigger指令的模板块，在这个块里定义选中后要展示的内容、样式即可，下拉面板内的mat-option写法不需要改动。
对应黑字+红字的自定义需求，示例代码如下：

<mat-select [(value)]="selectedValue">
  <!-- 专门定义选中后在选择框内的展示结构和样式 -->
  <mat-select-trigger>
    black text
    <span style="color: red;">
      {{selectedValue}}
    </span>
  </mat-select-trigger>

  <!-- 下拉面板内的选项保持原有写法即可 -->
  <mat-option value="red text">
    black text
    <span style="color: red;">
      red text
    </span>
  </mat-option>
</mat-select>

其他说明 #

• 如果你的选项是*ngFor动态生成的，可以把选项内的展示逻辑抽成单独的ng-template，在mat-option和mat-select-trigger里同时调用，避免重复编写结构和样式。
• 如果只需要调整选中项的基础样式（比如字体、颜色、边距），也可以通过自定义全局样式或用::ng-deep覆盖.mat-select-value类实现，但这类方式只适合简单样式调整，涉及复杂自定义结构时优先用mat-select-trigger，可控性更高，不会随组件版本升级失效。
• 不建议通过强行修改mat-select内部私有DOM的方式实现效果，这类hack写法在Angular Material版本升级后大概率会失效。

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