Liaison HTML angulaire

J'écris une application angulaire et j'ai une réponse HTML que je veux afficher.

Comment je fais ça? Si j'utilise simplement la syntaxe de liaison, {{myVal}}elle code tous les caractères HTML (bien sûr).

J'ai besoin de lier innerHTMLd'une manière ou d'une autre divla valeur de la variable.

La syntaxe correcte est la suivante:

<div [innerHTML]="theHtmlString"></div>

Référence de la documentation

Angular 2.0.0 et Angular 4.0.0 final

Pour un contenu sûr juste

<div [innerHTML]="myVal"></div>

DOMSanitizer

Le HTML potentiellement dangereux doit être explicitement marqué comme approuvé à l'aide du désinfectant Angulars DOM afin de ne pas supprimer les parties potentiellement dangereuses du contenu

<div [innerHTML]="myVal | safeHtml"></div>

avec un tuyau comme

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

Voir également Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

Et les documents: https://angular.io/api/platform-browser/DomSanitizer

Avertissement de sécurité

Faire confiance au HTML ajouté par l'utilisateur peut poser un risque pour la sécurité. Les documents mentionnés ci-dessus indiquent:

L'appel à l'une des bypassSecurityTrust...API désactive la désinfection intégrée d'Angular pour la valeur transmise. Vérifiez et auditez soigneusement toutes les valeurs et tous les chemins de code entrant dans cet appel. Assurez-vous que toutes les données utilisateur sont correctement échappées pour ce contexte de sécurité. Pour plus de détails, consultez le Guide de sécurité .

Balisage angulaire

Quelque chose comme

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

avec

<div [innerHTML]="foo"></div>

ne fera pas en sorte qu'Angular traite quoi que ce soit spécifique à Angularfoo . Angular remplace le balisage spécifique Angular au moment de la construction par du code généré. Le balisage ajouté lors de l'exécution ne sera pas traité par Angular .

Pour ajouter du code HTML contenant un balisage spécifique à Angular (liaison de propriété ou de valeur, composants, directives, canaux, ...), il est nécessaire d'ajouter le module dynamique et de compiler les composants lors de l'exécution. Cette réponse fournit plus de détails Comment puis-je utiliser / créer un modèle dynamique pour compiler un composant dynamique avec Angular 2.0?

[innerHtml] est une excellente option dans la plupart des cas, mais elle échoue avec des chaînes très grandes ou lorsque vous avez besoin d'un style codé en HTML.

Je voudrais partager une autre approche:

Tout ce que vous devez faire est de créer un div dans votre fichier html et de lui donner un identifiant:

<div #dataContainer></div>

Ensuite, dans votre composant Angular 2, créez une référence à cet objet (TypeScript ici):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

Ensuite, utilisez simplement la loadDatafonction pour ajouter du texte à l'élément html.

C'est juste une façon de le faire en utilisant du javascript natif, mais dans un environnement angulaire. Je ne le recommande pas, car rend le code plus salissant, mais parfois il n'y a pas d'autre option.

Voir aussi Angular 2 - style innerHTML

Sur [email protected]:

Html-Binding ne fonctionnera pas lors de l'utilisation d'un {{interpolation}}, utilisez plutôt une "Expression":

invalide

<p [innerHTML]="{{item.anleser}}"></p>

-> renvoie une erreur (interpolation au lieu de l'expression attendue)

correct

<p [innerHTML]="item.anleser"></p>

-> c'est la bonne façon.

vous pouvez ajouter des éléments supplémentaires à l'expression, comme:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

allusion

Le code HTML ajouté à l'aide [innerHTML](ou ajouté dynamiquement par d'autres moyens similaires element.appenChild()ou similaires) ne sera en aucun cas traité par Angular, à l'exception de la désinfection à des fins de sécurité.
De telles choses ne fonctionnent que lorsque le code HTML est ajouté de manière statique à un modèle de composants. Si vous en avez besoin, vous pouvez créer un composant lors de l'exécution, comme expliqué dans Comment puis-je utiliser / créer un modèle dynamique pour compiler un composant dynamique avec Angular 2.0?

Utiliser [innerHTML] directement sans utiliser le désinfectant DOM d'Angular n'est pas une option s'il contient du contenu créé par l'utilisateur. Le tuyau safeHtml suggéré par @ GünterZöchbauer dans sa réponse est un moyen de désinfecter le contenu. La directive suivante en est une autre:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

À utiliser

<div [safeHtml]="myVal"></div>

Veuillez vous référer à d'autres réponses plus à jour.

Cela fonctionne pour moi: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Selon un autre SO: Insertion de HTML du serveur dans le DOM avec angular2 (manipulation générale du DOM dans Angular2) , "inner-html" est équivalent à "ng-bind-html" dans Angular 1.X

Juste pour obtenir une réponse complète, si votre contenu html est dans une variable de composant, vous pouvez également utiliser:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

Je m'excuse si je manque le point ici, mais je voudrais recommander une approche différente:

Je pense qu'il est préférable de renvoyer les données brutes de votre application côté serveur et de les lier à un modèle côté client. Cela rend les demandes plus agiles car vous ne retournez que json depuis votre serveur.

Pour moi, il ne semble pas logique d'utiliser Angular si tout ce que vous faites est de récupérer du code HTML à partir du serveur et de l'injecter "tel quel" dans le DOM.

Je sais que Angular 1.x a une liaison html, mais je n'ai pas encore vu d'homologue dans Angular 2.0. Ils pourraient cependant l'ajouter plus tard. Quoi qu'il en soit, je considérerais toujours une API de données pour votre application Angular 2.0.

J'ai quelques exemples ici avec une simple liaison de données si vous êtes intéressé: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Une réponse courte a déjà été fournie ici: utiliser <div [innerHTML]="yourHtml"> liaison.

Cependant, les autres conseils mentionnés ici peuvent être trompeurs. Angular a un mécanisme de nettoyage intégré lorsque vous vous associez à des propriétés comme ça. Étant donné qu'Angular n'est pas une bibliothèque de nettoyage dédiée, il est trop zélé envers le contenu suspect de ne prendre aucun risque. Par exemple, il purifie tout le contenu SVG dans une chaîne vide.

Vous pourriez entendre des conseils pour "nettoyer" votre contenu en utilisant DomSanitizerpour marquer le contenu comme sûr avec des bypassSecurityTrustXXXméthodes. Il y a aussi des suggestions pour utiliser le tuyau pour ce faire et ce tuyau est souvent appelésafeHtml .

Tout cela est trompeur car il contourne en fait l' assainissement , pas la désinfection de votre contenu. Cela pourrait être un problème de sécurité, car si vous le faites sur du contenu fourni par l'utilisateur ou sur tout ce dont vous n'êtes pas sûr - vous vous ouvrez à des attaques de code malveillant.

Si Angular supprime quelque chose dont vous avez besoin par sa désinfection intégrée - ce que vous pouvez faire au lieu de le désactiver, c'est déléguer la désinfection réelle à une bibliothèque dédiée qui est bonne à cette tâche. Par exemple - DOMPurify.

J'ai créé une bibliothèque de wrappers pour qu'elle puisse être facilement utilisée avec Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Il a également un canal pour purifier déclarativement HTML:

<div [innerHtml]="value | dompurify"></div>

La différence avec les tuyaux suggérés ici est qu'il fait la désinfection via DOMPurify et fonctionne donc pour SVG.

Une chose à garder à l'esprit est que DOMPurify est idéal pour nettoyer HTML / SVG, mais pas CSS. Vous pouvez donc fournir le désinfectant CSS Angular pour gérer CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

C'est un ɵpréfixe interne - hense , mais c'est de cette façon que l'équipe Angular l'utilise également dans leurs propres packages. Cette bibliothèque fonctionne également pour Angular Universal et l'environnement de redéfinition côté serveur.

Utilisez simplement l' [innerHTML]attribut dans votre code HTML , quelque chose comme ceci ci-dessous:

<div [innerHTML]="myVal"></div>

Avez-vous déjà eu des propriétés dans votre composant qui contiennent des balises HTML ou des entités que vous devez afficher dans votre modèle? L'interpolation traditionnelle ne fonctionnera pas, mais la liaison de propriété innerHTML vient à la rescousse.

L'utilisation {{myVal}} ne fonctionne PAS comme prévu! Cela ne ramassera pas les balises HTML comme <p>, <strong>etc. et ne les passera que sous forme de chaînes ...

Imaginez que vous avez ce code dans votre composant:

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

Si vous utilisez {{myVal}}, vous obtiendrez ceci dans la vue:

<strong>Stackoverflow</strong> is <em>helpful!</em>

mais l'utilisation [innerHTML]="myVal"donne le résultat attendu comme ceci:

Stackoverflow est utile!

Vous pouvez appliquer plusieurs canaux pour le style, le lien et le HTML comme suit en .html

<div [innerHTML]="announcementContent | safeUrl| safeHtml">
                    </div>

et dans le tube .ts pour le désinfectant «URL»

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

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

tuyau pour désinfectant «HTML»

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

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

cela s'appliquera à la fois sans perturber aucun style et événement de clic de lien

 <div [innerHTML]="HtmlPrint"></div><br>

Le innerHtml est une propriété de HTML-Elements, qui vous permet de définir son contenu html par programmation. Il existe également une propriété innerText qui définit le contenu comme du texte brut.

le [attributeName]="value" crochet de la boîte, entourant l'attribut, définit une liaison d'entrée angulaire. Cela signifie que la valeur de la propriété (dans votre cas innerHtml) est liée à l'expression donnée, lorsque le résultat de l'expression change, la valeur de la propriété change également.

Donc, fondamentalement, [innerHtml]vous permet de lier et de modifier dynamiquement le contenu html de l'élément HTML donné.

Dans Angular 2, vous pouvez faire 3 types de liaisons:

• [property]="expression"-> Toute propriété html peut être liée à une
  expression. Dans ce cas, si l'expression change, la propriété sera mise à jour, mais cela ne fonctionne pas dans l'autre sens.
• (event)="expression" -> Lorsque l'événement active l'expression d'exécution.
• [(ngModel)]="property"-> Lie la propriété de js (ou ts) à html. Toute mise à jour sur cette propriété sera visible partout.

Une expression peut être une valeur, un attribut ou une méthode. Par exemple: '4', 'controller.var', 'getValue ()'

Exemple ici

La façon d'ajouter dynamiquement des éléments au DOM, comme expliqué dans la doc Angular 2, est d'utiliser la classe ViewContainerRef de @ Angular / core.

Ce que vous devez faire est de déclarer une directive qui implémentera ViewContainerRef et agira comme un espace réservé sur votre DOM.

Directif

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Ensuite, dans le modèle où vous souhaitez injecter le composant:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

Ensuite, à partir du code du composant injecté, vous injecterez le composant contenant le code HTML souhaité:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

J'ai ajouté une application de démonstration entièrement fonctionnelle sur Angular 2 pour ajouter dynamiquement un composant à la démo DOM

Vous pouvez utiliser plusieurs approches pour parvenir à la solution. Comme déjà dit dans la réponse approuvée, vous pouvez utiliser:

<div [innerHTML]="myVal"></div>

selon ce que vous essayez de réaliser, vous pouvez également essayer d'autres choses comme le DOM javascript (non recommandé, les opérations DOM sont lentes):

Présentation

<div id="test"></test>

Composant

var p = document.getElementsById("test");
p.outerHTML = myVal;

Reliure de propriété

Javascript DOM Outer HTML

Nous pouvons toujours transmettre le contenu html à la innerHTMLpropriété pour rendre le contenu dynamique html mais ce contenu html dynamique peut également être infecté ou malveillant. Donc, avant de transmettre du contenu dynamique à innerHTMLnous devons toujours nous assurer que le contenu est filtré (en utilisant DOMSanitizer) afin que nous puissions échapper à tout contenu malveillant.

Essayez ci-dessous le tuyau:

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

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

Si vous le souhaitez dans Angular 2 ou Angular 4 et que vous souhaitez également conserver le CSS en ligne, vous pouvez utiliser

<div [innerHTML]="theHtmlString | keepHtml"></div>

Vous pouvez également lier les propriétés de classe de composant angulaire avec un modèle en utilisant une forme canonique comme ci-dessous:

<div bind-innerHTML="theHtmlString"></div>

Documentation angulaire: https://angular.io/guide/template-syntax#property-binding-property

Voir l' exemple de stackblitz fonctionnel ici

Travailler dans Angular v2.1.1

<div [innerHTML]="variable or htmlString">
</div>

Si vous avez des modèles dans votre application angulaire (ou dans n'importe quel framework) et que vous renvoyez des modèles HTML de votre backend via une requête / réponse HTTP, vous mélangez des modèles entre le frontend et le backend.

Pourquoi ne pas simplement laisser les modèles sur le frontend (je dirais que), ou dans le backend (imo assez transparent)?

Et si vous conservez des modèles dans le frontend, pourquoi ne pas simplement répondre avec JSON pour les demandes au backend. Vous n'avez même pas besoin d'implémenter une structure RESTful, mais garder les modèles d'un côté rend votre code plus transparent.

Cela sera rentable lorsque quelqu'un d'autre devra faire face à votre code (ou même vous ressaisissez vous-même votre code après un certain temps)!

Si vous le faites correctement, vous aurez de petits composants avec de petits modèles, et mieux encore, si votre code est imba, quelqu'un qui ne connaît pas les langages de codage pourra comprendre vos modèles et votre logique! De plus, gardez vos fonctions / méthodes aussi petites que possible. Vous découvrirez finalement que la maintenance, la refactorisation, la révision et l'ajout de fonctionnalités seront beaucoup plus faciles par rapport aux grandes fonctions / méthodes / classes et mélanger les modèles et la logique entre le frontend et le backend - et garder autant de logique dans le backend si votre frontend doit être plus flexible (par exemple, écrire un frontend android ou passer à un framework frontend différent).

Philosophie, mec :)

ps: vous n'avez pas à implémenter du code 100% propre, car c'est très cher - surtout si vous devez motiver les membres de l'équipe;) mais: vous devez trouver un bon équilibre entre une approche de code plus propre et ce que vous avez (peut-être est déjà assez propre)

consultez le livre si vous le pouvez et laissez-le entrer dans votre âme: https://de.wikipedia.org/wiki/Clean_Code