Quiero tener algo que encuentre direcciones URL en el texto y que se pueda hacer clic en ellas. Entonces, para lograr esto, he creado una tubería personalizada:

 @Pipe({ name: 'urlify' }) export class UrlifyPipe implements PipeTransform { transform(text: any): any { const urlRegex = /(\b(https?|ftp|file):\/\/[-AZ\d+&@#/%?=~_|!:,.;]*[-AZ\d+&@#/%=~_|])/ig; return text.replace(urlRegex, (url) => { return '<a href="' + url + '">' + url + '</a>'; }); } }

Y eso funciona como se esperaba cuando lo uso junto con <div [innerHtml]="someText | urlify">

Pero el problema es que, en algunos casos, se puede hacer clic en el div envolvente, por lo que tengo que detener la propagación y prevenir el valor predeterminado en el elemento <a> .

Así que he creado una directiva para eso:

 @Directive({ selector: '[sfStopPropagation]' }) export class StopPropagationDirective { @HostListener("click", ["$event"]) public onClick(event: any): void { event.preventDefault(); event.stopPropagation(); } }

Y luego use esto en la tubería return '<a sfStopPropagation href="' + url + '">' + url + '</a>';

El problema es que no funciona en absoluto. Incluso intenté crear un método en el archivo de canalización y llamarlo al hacer clic en el elemento, pero tampoco funciona (lo mismo con ${ } ):

Y este es un ejemplo donde lo estoy usando:

¿Alguien me puede ayudar?