是否可以用斜角突出显示文本？

Question

我正在尝试突出显示{{receipt}}输出中输入到输入中的搜索查询。

component.html：

          <h5 style="text-decoration: underline">Your Receipt</h5>
          <pre>
            {{receipt}}
          </pre>
          Product Search:<input type="text" (input)="onSearchChange($event.target.value)">
          <br>
          <span>Total Price: {{total}}</span>
          </div>

component.ts：

  onSearchChange(SearchValue){
    if((this.receipt).includes(SearchValue)){
    };

您可以看到，到目前为止，我唯一要做的就是检查收据变量中是否存在已提交的输入。我想以某种方式突出显示它。

任何建议将不胜感激。谢谢

编辑：我在看：https://stackblitz.com/edit/angular-highlight-directive

但是我不确定如何在我的情况下实现该指令

Answer 1

没有指令，您可以使用以下代码实现相同的功能

在您的TS文件中

 @ViewChild('refEl') refEl;

 onSearchChange(value){
   if((this.receipt).includes(value)){
     this.renderer.setProperty(
     this.refEl.nativeElement,
      'innerHTML',
      this.getFormattedText(value)
    );       
  };
 }

 getFormattedText(value){
    const valuestring = value.trim().split(' ')
    const re = new RegExp(`(${ valuestring.join('|') })`, 'g');
    return this.receipt.replace(re, `<span class="selected">$1</span>`);
 }

用您的html

 <div>
   <h5 style="text-decoration: underline">Your Receipt</h5>
   <pre #refEl> {{receipt}} </pre>
    Product Search:<input type="text" (input)="onSearchChange($event.target.value)">
   <br>
   <span>Total Price: {{total}}</span>
 </div>

在您的.css文件中

 ::ng-deep .selected {
   color:red;
  }

Edit：如有任何障碍，我将stackblitz放在一起