Question Liaison HTML angulaire


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

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

Je dois en quelque sorte lier le html interne d'un div à la valeur de la variable.


471
2017-07-21 19:48


origine


Réponses:


La syntaxe correcte est maintenant la suivante:

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

Travaille dans 6.0.4

Référence de la documentation


825
2017-12-22 21:02



Angular 2.0.0 et Angular 4.0.0 final

Pour un contenu sécurisé juste

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

DOMSanitizer

Le code HTML potentiellement dangereux doit être explicitement marqué comme fiable à l'aide de l'assainisseur Angulars DOM afin qu'il ne supprime pas 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 en utilisant la syntaxe de liaison

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

Avertissement de sécurité

L'ajout de code HTML de confiance peut poser un risque de sécurité. L'avant documents mentionnés Etat:

Appel à l'un des bypassSecurityTrust... L'API désactive la vérification intégrée d'Angular pour la valeur transmise. Vérifiez et vérifiez 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, voir 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 provoquera pas Angular à traiter quoi que ce soit angulaire spécifique dans foo. Angulaire remplace le balisage angulaire spécifique au moment de la construction avec le code généré. Balisage ajouté à l'exécution ne sera pas traité par Angular.

Pour ajouter du HTML contenant du balisage spécifique à Angular (liaison de propriété ou de valeur, composants, directives, tubes, ...), 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?


174
2017-12-11 17:42



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

J'aimerais partager d'autres approches:

Tout ce que vous avez à faire est de créer un div dans votre fichier html et 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 loadData fonction pour ajouter du texte à l'élément html.

C'est juste une façon que vous le feriez en utilisant javascript natif, mais dans un environnement angulaire. Je ne le recommande pas, car cela rend le code plus désordonné, mais parfois il n'y a pas d'autre option.

Voir également Angulaire 2 - style HHML interne


123
2017-08-08 10:10



Sur angulaire2@2.0.0-alpha.44:

Html-Binding ne fonctionne pas lorsque vous utilisez un {{interpolation}}, utilisez plutôt une "Expression":

invalide

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

-> lance 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

HTML ajouté en utilisant [innerHTML] (ou ajouté dynamiquement par d'autres moyens comme element.appenChild()ou similaire) ne seront pas traitées par Angular de quelque manière que ce soit, à l'exception de la désinfection pour des raisons de sécurité.
De telles choses fonctionnent seulement quand le HTML est ajouté statiquement à 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?


25
2017-12-13 23:39



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

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


14
2017-08-19 20:10



Utiliser [innerHTML] directement sans utiliser l'assainisseur DOM de Angular n'est pas une option s'il contient du contenu créé par l'utilisateur. Le tube safeHtml proposé par @ GünterZöchbauer dans sa réponse est une façon d'assainir 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>

14
2017-12-13 12:20



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

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

9
2017-12-31 05:43



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 du côté client. Cela rend les requêtes plus agiles puisque vous renvoyez uniquement json depuis votre serveur.

Pour moi, cela ne semble pas logique d'utiliser Angular si tout ce que vous faites est d'aller chercher du 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 de contrepartie dans Angular 2.0. Ils pourraient l'ajouter plus tard cependant. 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


7
2017-07-21 22:17



Il suffit de simplement utiliser [innerHTML] attribuer dans votre HTML, quelque chose comme ça ci-dessous:

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

Vous avez déjà eu des propriétés dans votre composant qui contiennent du balisage html ou   entités que vous devez afficher dans votre modèle? Le traditionnel   l'interpolation ne fonctionnera pas, mais la liaison de la propriété innerHTML vient à   la rescousse.

En utilisant {{myVal}}  Ne fait pas travailler comme prévu! Ce habitude ramasser les balises HTML comme <p>, <strong> etc et passez-le seulement comme des chaînes ...

Imaginez que vous avez ce code dans votre composant:

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

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

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

mais en utilisant [innerHTML]="myVal"fait le résultat attendu comme ceci:

Stackoverflow est utile!


1
2018-06-20 15:21