routeurLink ne fonctionne pas lorsqu'il est généré par des tuyaux

Question

J'essaie d'écrire un tuyau qui peut faire des mots aveC#hashtaginto exactement comme twitter.

Ceci est la fonction dans mes tuyaux qui génère convertit #tags en URL.

urlifyHashtags(_text) : String { 
let hashtagRegex = /^#([a-zA-Z0-9]+)/g; 
let tempText = _text.replace(hashtagRegex, " <a [routerLink]=\"['/search/hash/aaa']\" routerLinkActive=\"active-link\">#$1</a>"); 
var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g; 
tempText = tempText.replace(hashtagRegex2, "<a [routerLink]=\"['/search/hash/' , 'Russ']\" routerLinkActive=\"active-link\"> #$2</a>"); 
return tempText; 
} 

Et c'est où il va:

<p *ngIf="!editable" [innerHTML] ="item.body | bodyHashtag"></p> 

Toute aide/conseils très appréciés.

Answer 1

Vous devez désinfectez votre code HTML tout en injectant HTML en utilisant [innerHTML], en utilisant DomSanitizer provider with SafeHtml.

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser' 


export class myCustomPipe implements PipeTransform 
{ 
    constructor(private sanitized: DomSanitizer) {} 

    transform(value: string): SafeHtml{ 
     return this.sanitized 
        .bypassSecurityTrustHtml(this.urlifyHashtags(value)); 
    } 

    urlifyHashtags(_text) : String { 
      let hashtagRegex = /^#([a-zA-Z0-9]+)/g; 
      let tempText = _text.replace(hashtagRegex,"<a [routerLink]=\"['/search/hash/aaa']\" routerLinkActive=\"active-link\">#$1</a>"); 
      var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g; 
      tempText = tempText.replace(hashtagRegex2, "<a [routerLink]=\"['/search/hash/' , 'Russ']\" routerLinkActive=\"active-link\"> #$2</a>"); 
      return tempText; 
    } 

} 

Answer 2

angulaire ne traite pas HTML ajouté dynamiquement. Bien que vous pourriez être en mesure d'ajouter le code HTML en utilisant la méthode micronyks, Angular ne créera pas de lien de routeur à partir de ce code HTML. Angular traite uniquement le HTML (sauf la désinfection à des fins de sécurité) pour HTML ajouté statiquement à un modèle de composants.

Ce que vous pouvez faire est bien de créer des valeurs liées dynamiquement

<a [routerLink]="someStringFromComponentClass" routerLinkActive="active-link">{{boundValue}}</a> 

Si vous avez réellement besoin de construire cette dynamique, vous pouvez créer et ajouter un composant à l'exécution comme expliqué dans How can I use/create dynamic template to compile dynamic Component with Angular 2.0?