web-dev-qa-db-fra.com

Comment autoriser le code HTML en retour de pipe angular2?

J'ai un tube qui renvoie une chaîne html, mais les sorties de chaîne ont probablement échappé par défaut pour des raisons de sécurité. Je suis sûr qu'il doit y avoir une option pour autoriser le langage HTML à la place, mais je ne le trouve pas lorsque je recherche des documents.

Comment puis-je dire au tuyau d'autoriser le rendu du code HTML réel?

pipeangular
33
rgb

Utilisez les liaisons vers innerHTML ou outerHTML pour rendre le code HTML échappé. Par exemple <span [innerHTML]="someString | toHtmlPipe"></span>. Voir ce plunk :

@Pipe({
  name: 'wrapBold'
})
class WrapBold {
  transform(content) {
    return `<b>${content}</b>`;
  }
}

@Component({
  selector: 'my-app',
  pipes: [WrapBold],
  template: `
    <div>
      Hello <span [outerHTML]="content | wrapBold"></span>
    </div>
  `
})
export class App {
  constructor() {
    this.content = 'Angular2'
  }
}
71
alexpods

Je ne sais pas si c'est possible avec un tuyau. (Oui, voir la réponse de @ alexpods.)

Avez-vous envisagé de convertir votre canal en un composant avec une propriété d'entrée? Autrement dit, quel que soit l'alimentation de votre conduite, faites-en une propriété d'entrée du composant. Placez le code HTML généré par le canal dans le modèle du composant.

7
Mark Rajcok

Alors merci pour les réponses.

L'utilisation de la liaison outerHTML suggérée par @alexpods a fonctionné de manière exceptionnelle… .. Je n'ai pas eu besoin de changer de canal.

Donc ce que je faisais avant:

{{'TEXT' | hn: 'h2.whatever'}} qui a abouti au code HTML correct mais échappé, par exemple.

&lt;h2 class="whatever"&gt;TEXT&lt;/h2&gt;

Fonctionne bien comme: <span [outerHTML]="'TEXT' | hn:'h2.whatever'"></span>

quelles sorties: <h2 class="whatever">TEXT</h2>

6
rgb

Donc, vous voulez prendre du texte et l'afficher au format HTML. Si la chaîne est du code HTML réel, pourquoi pas un composant? Ce n'est pas la fonctionnalité d'un tuyau pour rendre HTML. Toutefois, si vous souhaitez, par exemple, rendre du texte avec des nouvelles lignes, comme une valeur JSON avec indentation, utilisez un élément pré-HTML:

{{obj | myPipe}}

Je vais cependant upvoter la réponse innerHtml, comme réponse réelle à la question.

0
Siderite Zackwehdex