Angular Material中mat-option内自定义标签被移除的原因

自定义嵌套标签丢失不是代码写法错误，是MatSelect组件的默认行为导致的：

• 未自定义选择框触发器模板时，组件会自动提取<mat-option>内部的纯文本内容，直接渲染到选择框闭合状态的显示区域（也就是你看到的带mat-select-min-line类的span元素），这个过程会剥离所有内部嵌套HTML标签，只保留拼接后的文本，因此你添加的span、div、em等标签都会被过滤。
• 你查到的“嵌套标签可正常保留”的结论没有错，只是对应的是下拉面板展开状态下的option渲染结果：展开面板后检查内部的option元素，就能看到你写的嵌套标签实际是正常渲染的，仅选择框收起后的选中值展示区会做纯文本提取。

要让自定义文本样式在选中值展示区也生效，需要使用mat-select-trigger自定义选择框的选中内容模板，手动指定渲染结构，参考代码如下：

<mat-select [(ngModel)]="something">
  <!-- 自定义选中后在选择框内显示的内容，该部分结构会被完整渲染，不会被剥离标签 -->
  <mat-select-trigger>
    {{selectedField.name}}
    <span class="type-highlight">
      ({{selectedField.type}})
    </span>
  </mat-select-trigger>

  <mat-option *ngFor="let field of fields" [value]="field.name">
    <div class="option-wrap">
      {{field.name}}
      <span class="type-highlight">
        ({{field.type}})
      </span>
    </div>
  </mat-option>
</mat-select>

对应样式直接给自定义类添加即可，示例：

.type-highlight {
  color: #8a8a8a;
  font-size: 0.9em;
  margin-left: 6px;
}

• 下拉面板内的option内容不需要额外修改，原有嵌套标签本身就可以正常渲染，补上自定义trigger模板后，选中状态的展示内容也会保留标签结构，自定义样式即可正常生效。

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