通过指令进行字符串插值

Question

最常见的是，您会以如下方式设置 mat-option 文本。

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

问题是我有一个指令来处理字符串，然后将其设置在元素的内部文本上。它会覆盖 mat 选项的 HTML。

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

那么有没有办法通过指令设置插值？

Answer 1

您可以使用

Renderer2

和

ElementRef

来转换文本并使用

appendChild

方法插入。

@Directive({
  selector: '[appTransform]',
  standalone: true,
})
export class AppTransformDirective {
  str: InputSignal<string> = input.required<string>({
    alias: 'appTransform',
  });
  renderer = inject(Renderer2);
  element = inject(ElementRef);
  ngOnInit() {
    const transformed = `${this.str()} car`;
    const text = this.renderer.createText(transformed);
    const elementToInsertIn = this.element.nativeElement.querySelector(
      '.mdc-list-item__primary-text'
    );
    this.renderer.appendChild(elementToInsertIn, text);
  }
}

完整代码：

import {
  Component,
  Directive,
  input,
  InputSignal,
  ElementRef,
  Renderer2,
  inject,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

interface Food {
  value: string;
  viewValue: string;
}

@Directive({
  selector: '[appTransform]',
  standalone: true,
})
export class AppTransformDirective {
  str: InputSignal<string> = input.required<string>({
    alias: 'appTransform',
  });
  renderer = inject(Renderer2);
  element = inject(ElementRef);
  ngOnInit() {
    const transformed = `${this.str()} car`;
    const text = this.renderer.createText(transformed);
    const elementToInsertIn = this.element.nativeElement.querySelector(
      '.mdc-list-item__primary-text'
    );
    this.renderer.appendChild(elementToInsertIn, text);
  }
}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  imports: [
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    FormsModule,
    AppTransformDirective,
  ],
})
export class SelectOverviewExample {
  cars: string[] = ['volvo', 'saab', 'mercedes', 'audi'];
}

Stackblitz 演示