angular - angular、matInput 和使用指令突出显示关键字

Question

下面是我尝试在 matInput 中突出显示关键字的指令。

import {Directive, Renderer2, OnInit, ElementRef} from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Directive({
  selector: '[appKeywordHighlight]'
})
export class KeywordHighlightDirective implements OnInit {

  constructor(private renderer: Renderer2,
              private elRef: ElementRef,
              private _sanitizer:DomSanitizer) { }

  ngOnInit() {
    console.log(this.elRef.nativeElement.value)
    this.renderer.setProperty(this.elRef.nativeElement,'value', "I am <span>very</span> happy");
  }

} //end class

在我的输入框中，这是我得到的：

I am <span>very</span> happy

如果不可能，那么好的，但如果可能的话，我如何突出显示关键字？我将为跨度分配一个类来着色。

<mat-form-field>
     <mat-label>keyword:</mat-label>
        <input matInput formControlName="keyword" appKeywordHighlight>
</mat-form-field>