web-dev-qa-db-fra.com

Angular2 innerHtml binding, attribut de style

Mon problème, lorsque j'utilise innererHtml binding - angular2, supprime tous les attributs de styles. C’est important pour moi, car ma tâche est sérieuse: le code HTML est généré côté serveur avec tous les styles. Exemple:

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
  `,
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = 'Angular2'
    this.html = "<span style=\"color:red;\">1234</span>";
  }
}

Mais dans DOM, je ne vois que 1234 et ce texte n’est pas rouge.

http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview

Je vous remercie!

angularstyles
50
SamProf

Vous pouvez utiliser DomSanitized pour l'éviter.

Le moyen le plus simple est de créer un tuyau personnalisé comme:

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

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

Donc, vous pouvez l'utiliser comme:

<div [innerHtml]="html | safeHtml"></div>

Exemple de Plunker

113
yurzui

J'ai amélioré un peu l'exemple de yurzui en complétant les importations nécessaires:

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

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

J'ai également dû ajouter la classe dans mon fichier app.module.ts

import ...
import {SafeHtmlPipe} from "./pipes/safehtml.pipe";
@NgModule({
    declarations: [
        AppComponent,
        ...,
        SafeHtmlPipe  <--
    ],
    imports: [...],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {
}
31
mvermand

Notez que le sanitizer a quelques méthodes pour faire confiance au contenu , par exemple.

return this.sanitizer.bypassSecurityTrustStyle(value);
return this.sanitizer.bypassSecurityTrustHtml(value);
return this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1]

via https://stackoverflow.com/a/41089093/142714

Donc, bypassSecurityTrustStyle peut aussi être ce que vous voulez ici, car cela montrera les styles en ligne dans votre contenu HTML (value).

[1] docs: https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

4
a darren

Angular 2 vise plus approche déclarative , donc manipule directement HTML est souvent déconseillé .

Je crois que (presque) toutes les manipulations HTML sont corrigées pour être filtrées par la désinfection DOM d'angular. Comme vous pouvez l'imaginer, style les attributs ne sont pas inscrits sur la liste blanche pour les éléments span, en fait, span n'a pas d'attribut autorisé pour le moment.

2
kbtzr