如何通过自定义指令设置mat-option的插值字符串？

当然可以通过该指令设置插值后的内容，但需要调整指令的实现逻辑，避免直接覆盖mat-option的整个HTML结构。

问题根源 #

你当前的指令直接设置宿主元素的innerText，而mat-option内部有Angular Material生成的DOM结构（比如<span class="mat-option-text">文本容器），直接覆盖会破坏这些内置结构。

调整方案 #

修改指令，针对mat-option做特殊处理，精准更新其内部的文本容器，而非整个元素的内容：

指令代码示例

import { Directive, Input, ElementRef, Renderer2, OnInit, Optional } from '@angular/core';
import { MatOption } from '@angular/material/core';

@Directive({
  selector: '[appTransform]'
})
export class TransformDirective implements OnInit {
  @Input('appTransform') rawContent: string;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    @Optional() private matOption: MatOption // 注入MatOption，可选匹配
  ) {}

  ngOnInit(): void {
    const transformedContent = this.processText(this.rawContent);
    if (this.matOption) {
      // 定位到mat-option内置的文本容器
      const textContainer = this.el.nativeElement.querySelector('.mat-option-text');
      if (textContainer) {
        this.renderer.setProperty(textContainer, 'innerText', transformedContent);
      }
    } else {
      // 非mat-option元素的通用处理逻辑
      this.renderer.setProperty(this.el.nativeElement, 'innerText', transformedContent);
    }
  }

  // 你的字符串处理逻辑，替换成实际转换规则
  private processText(text: string): string {
    // 示例：将文本转为大写
    return text ? text.toUpperCase() : '';
  }
}

使用方式不变

<mat-option [value]="type.key" [appTransform]="type.value"></mat-option>

额外说明 #

• 用@Optional()注入MatOption，确保指令在非mat-option元素上也能正常工作
• 通过querySelector('.mat-option-text')定位内置文本容器，避免破坏mat-option的其他DOM结构
• 保留原有通用逻辑，不影响指令在其他元素上的使用

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