[Angular5] RouterLink dans une chaine de caractère dans une HashMap

remy76690
Javascript

Bonjour,

Pour permettre de remplacer certaines parties de chaine de caractère venant de mes fichiers locales.json. J'indique les différents keys - valeur dans une variable qui est dans mon compoment. Ce qui fonctionne bien, mais le problème c'est que les attributs d'Angular ne fonctionnent pas et ne sont tout simplement pas interprétés voir retirer du DOM.

Ce que j'ai dans mon compoment :

export class HomeComponent {
  public welcomeParams: object = {
    '%start_link_homepage%' : '<a [routerLink]="' + this.localize.translateRoute('/') + '">',
    '%end_link_homepage%' : '</a>'
  };

  constructor(private localize: LocalizeRouterService) { }
}

this.localize.translateRoute('/') => retourne : /fr/

Mon code dans l'html :

<div [innerHTML]="'app.home.welcome.text' | translate | join | replace:welcomeParams"></div>

La pipe join, permet juste de joindre les différents elements d'un tableau. La pipe replace permet tout simplement de faire un find & replace avec un hashmap passer en paramètre.

Quand je teste ceci, j'ai comme retour : <a> Website </a>
Et je voudrais comme retour : <a href="/fr" ng-reflect-router-link="/fr/"> Website </a>

Merci de votre aide.

PS : J'ai aussi ouvert un topic sur Stack Overflow : https://stackoverflow.com/questions/48333375/use-routerlink-in-string-value-on-hashmap-object

2 réponses

remy76690
Auteur
Réponse acceptée

Salut,

Le souci, c'est que les balises ou attributs rajouter dans le json ne sont pas vraiment interprétés par Angular (en utilisant ngx-translate)
Mais, j'ai logiquement trouvé une solution à mon problème, c'est d'implementer AfterViewInit à mon compoment et ensuite utiliser jquery (je pense qu'on peut utiliser ElementRef pour faire cela) pour sélectionner l'attribut et lui ajouter un évènement et exécuter une méthode d'angular.

Exemple :

public welcomeParams: object = {
    '%start_link_homepage%': '<a class="ng-link" href="' + this.localize.translateRoute('/').slice(0, -1) + '">',
    '%end_link_homepage%': '</a>',
}

ngAfterViewInit(): void {
    let self = this;
    $('.ng-link').off().on('click', function (e) {
      e.preventDefault();
      console.log('Ok');
      let href = this.href.replace(/^(?:\/\/|[^\/]+)*\//, '');
      self.router.navigate([href]);
    });
  }

Je n'ai pas encore pu tester car je n'ai pas encore plusieurs pages mais il me retourne aucune erreur et le console.log est bien exécuté.
Je confirmerais cela dans quelques jours.

EDIT :

Je confirme que cela fonctionne :)

coolbreeze

Salut je pense que tu devrais avoir des attributs <router-outlet><\router-ourlet> et definir la configuration de ton routage.
Voilà un lien essaie de voir si tu trouve solution à ton problème https://angular.io/tutorial/toh-pt5