使用renderer2

Question

我想突出显示字符串中的特定单词。 例如，在此字符串中，示例Hello Welcome! Click here for more details要突出显示Hello Welcome。

要注意的地方：高亮文本是动态的，并且不断变化。

那么如何使用角度渲染器找到highlightText并为其应用样式？

请提出其他可能的解决方案？

我的HTML

<p #test>Hello Welcome! Click here for more details</p>

我的代码

以下代码无效。

export class AppComponent implements AfterViewInit {
  @ViewChild('test') test: ElementRef;

  higlightText= 'Hello Welcome';

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
  let text = this.test.nativeElement.innerHTML;
  let a = text.search(this.higlightText);
  this.renderer.setStyle(a,'font-weight','bold');
  }
}

链接到项目： https://stackblitz.com/edit/renderer2-example-2-vtbhfq?file=src%2Fapp%2Fapp.component.ts

Answer 1

继续您的开始：将ngAfterViewInit更改为：

  ngAfterViewInit() {
     this.renderer.setProperty(this.test.nativeElement, 'innerHTML', this.test.nativeElement.innerHTML.replace(this.higlightText,`<b>${this.higlightText}</b>`));
   }

https://stackblitz.com/edit/renderer2-example-2-yweqw1?file=src/app/app.component.ts