Блог

Я хотел выделить определенное слово в строке. Например, Hello Welcome! Click here for more details в этой строке я хотел выделить Hello Welcome .

Следует отметить: выделенный текст динамичен, он постоянно меняется.

Итак, как найти highlightText и применить к нему стили с помощью angular renderer?

Пожалуйста, предложите другие возможные решения?

Мой 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/app/app.component.ts

Продолжая то, что вы начали: измените 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