Estou tentando criar uma diretiva que modifique o elementoinnerHTML adicionando links às substrings que começam com@ símbolo.

Isto é o que eu tentei até agora,

linkify.directive.ts

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
      let elementText = this.elementRef.nativeElement.innerHTML;
      // elementText = '@user mentioned you';
      console.log(`Element Text: ${elementText}`);
      this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText));
  }

e eu estou usando assim

<p linkify> Hey @user check this out! </p>

Durante a depuração, fiz as seguintes observações,

this.elementRef.nativeElement.innerHTML sempre tem uma string vazia.this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', 'something'); éanexando something para o início do texto do elemento em vez de substituir.

Questão 1: Como acessar oinnerHTML de um elemento?

Questão 2: Como definir o innerHTML de um elemento de uma diretiva?

Stackblitz demonstrando o problema

Eu tentei a documentação paraRenderer2, mas não ajuda em nada.