Angular2 innerHtml binding, attribut de style

Question

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 causée par le fait que le HTML soit 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!

Answer 1

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

Answer 2

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 {
}
 

Answer 3

Notez que l' sanitizer a quelques méthodes pour faire confiance à un 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, ce qui permettra d'afficher des styles en ligne au sein de votre contenu HTML (value).

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

Answer 4

Angulaire 2 buts pour une approche déclarative, afin de manipuler directement le HTML est souvent découragé.

Je crois que (presque) tout le code HTML manipulations sont patché pour être filtré par angulaire du DOM de la désinfection. Comme vous pouvez l'imaginer style attributs ne sont pas dans la liste blanche pour les éléments span, en fait, la durée n'a pas d'attributs autorisés pour l'instant.