RouterLink/AddEventListener not working with SafeHtml

Hi,

I 'm creating an app with Notification, I stored them with a text like :
$name like your photo

When the App loads the notification it parse it before display it.

My goal is to add some link to the text before display it on the screen, like this for exemple:
$name like you pseudo ==> <a routerLink="profile/nameId">@Henry</a> like your photo

1 - routerLink
First I tried this solution :

HTML : I pass my variable with [innerHTML]="doms.bypassSecurityTrustHtml(notification.text)"

<ion-list>
   <ion-item *ngFor="let notification of notifications" color="{{notification.new ? 'itemback' : ''}}">
     <div [ngClass]="{'new_notification' : notification.new}">
       <ion-label class="ion-text-wrap" >
         <h3 class="activity_date">{{notification.createdAt | date:'longDate'}}</h3>
         <p class="activity_message" [innerHTML]="doms.bypassSecurityTrustHtml(notification.text)"></p>
       </ion-label>
     </div>
   </ion-item>
 </ion-list>

TS :

notif.text = notif.text.replace(/\$name/g,  '<a routerLink="[\'profile\', notif.refNameId">@' + notif.name + '</a>');

ERROR : Here the security function block the routerLink function and transform it in lower case :
<a [routerlink]="['profile','12345789']>Henry</a> likes your photo

2 - addEventListener
I tried to add the event to the <a> directive and then handle the redirecton in the code.

HTML : IIt’s the same, I just add a “test” button

TS :

I had selector instead of the routerLink and I pass the ID of the NAME in the id tag.

notif.text = notif.text.replace(/\$name/g, '<a class="name_link" id="123456">@' + notif.refName.pseudo + '</a>');

test() {
    console.log('test');

    const nameLink = document.getElementById('test');
    console.log(nameLink);
    tipseursLink.addEventListener('click', (e) => { console.log('test click event'); });
    tipseursLink.classList.add('hueframe');
    console.log(nameLink);

  }

ERROR : Nothing happened …
I load py page, click on the Test button that shoud add the event listener to my directive then I click on the @Hnery but nothing …

As you can see I had tipseursLink.classList.add('hueframe'); for test purpose and I observed that the class is add to the directive but VERY quickly erase ! I even had to spam the refresh button to see it !

I tried to change the directive from <a> to <button> <div> … nothing works !

Can you help me ?
Please ask if something isn’t clear.

EDIT1: I add that I can’t just split my text and display the text like this :
<a routerLink="..." >{{pseudo}}</a> {{text}}
Because I don’t always where the $name will be in the text and it can be in the middle of the sentence.

Thanks in advance
Xav

2 posts - 2 participants

Read full topic