web-dev-qa-db-fra.com

Comment remplacer la chaîne dans angular 2?

J'ai utilisé avec l'interpolation ci-dessous dans la page html.

<div>{{config.CompanyAddress.replace('\n','<br />')}}</div>

et aussi utilisé

<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div>

Mais les deux affichent le texte comme ci-dessous

{{config.CompanyAddress.replace('\n','<br />')}}
{{config.CompanyAddress.toString().replace('\n','<br />')}}
javascriptangularstring-interpolation
10
Nimesh Vaghasiya

Vous pouvez utiliser un tuyau pour le même:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '<br/>');
  }
}

Le tuyau doit être inclus dans vos déclarations @NgModule pour être inclus dans l'application. Pour afficher le code HTML dans votre modèle, vous pouvez utiliser la liaison externalHTML.

<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span>
20
Siddharth Sharma

{{}} est pour l'interpolation de chaîne et le résultat sera toujours ajouté en tant que chaîne. La liaison ne fonctionne pas du tout dans ce cas à cause du < et > contenu dans l'expression, le {{}} ne sont pas interprétés comme prévu.

<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div>

avec

replaceLineBreak(s:string) {
  return s && s.replace('\n','<br />');
}

devrait faire ce que vous voulez. Comme mentionné par @hgoebl replaceLineBreak pourrait également être implémenté en tant que pipe si vous en avez besoin à plusieurs endroits.

Exemple Plunker

Astuce : Il est déconseillé de se lier directement aux méthodes, car la méthode est appelée à chaque cycle de détection de changement. Un tube pur (par défaut) n'est appelé que lorsque la valeur d'entrée change. Un tuyau est donc plus efficace.

Une autre façon consiste à effectuer le remplacement une seule fois et à lier la valeur avec les sauts de ligne remplacés au lieu d'appeler replaceLineBreak à plusieurs reprises.

Astuce : Vous voulez probablement remplacer tous les sauts de ligne, pas seulement le premier. une. Il y a suffisamment de questions JS là-bas qui expliquent comment faire cela, donc je n'ai pas pris la peine.

10
Günter Zöchbauer