tamaƱo personalizado para links imagenes estilos estilo ejemplos ejemplo editar diferentes darle con cambiar atributo css angular

css - personalizado - En RC.1, algunos estilos no se pueden agregar utilizando la sintaxis de enlace



tooltip html ejemplos (1)

Estilos como

<div [style.background-image]="/'url(/' + image + /')/'">Background</div> <div [style.transform]="rotate(7deg)"

ya no se agregan


actualización (2.0.0 final)

import { Pipe, PipeTransform } from ''@angular/core''; import { DomSanitizer } from ''@angular/platform-browser''; @Pipe({name: ''safeHtml''}) export class SafeHtml implements PipeTransform { constructor(private sanitizer:DomSanitizer){} transform(html) { return this.sanitizer.bypassSecurityTrustStyle(html); // return this.sanitizer.bypassSecurityTrustHtml(html); // return this.sanitizer.bypassSecurityTrustScript(html); // return this.sanitizer.bypassSecurityTrustUrl(html); // return this.sanitizer.bypassSecurityTrustResourceUrl(html); } }

Ver también https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

actualizar

DomSanitizationService cambiará de nombre a DomSanitizer en RC.6

original

Esto debería arreglarse en RC.2

Consulte también la Guía del desarrollador de Angular2: seguridad

Angular2 introdujo la desinfección de los valores CSS y la vinculación de propiedades como [innerHTML]=... y [src]="..." en RC.1

Ver también https://github.com/angular/angular/issues/8491#issuecomment-217467582

Los valores se pueden marcar como confiables utilizando DomSanitizer.bypassSecurityTrustStyle(...)

import {DomSanitizer} from ''@angular/platform-browser''; ... constructor(sanitizer: DomSanitizationService) { this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle(''url('' + this.image + '')''); // for HTML // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...); }

y vinculante a este valor en lugar de la cadena simple no confiable.

Esto también se puede envolver en una tubería como

@Pipe({name: ''safeStyle''}) export class Safe { constructor(private sanitizer:Sanitizer){} transform(style) { return this.sanitizer.bypassSecurityTrustStyle(style); // return this.sanitizer.bypassSecurityTrustHtml(style); // return this.sanitizer.bypassSecurityTrustScript(value); // return this.sanitizer.bypassSecurityTrustUrl(value); // return this.sanitizer.bypassSecurityTrustResourceUrl(value); } }

<div [ngStyle]="someStyle | safeStyle"></div>

con

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

aún funciona: - [(está en progreso)

Ejemplo de Plunker (Angular 2.0.0-rc-1)

Consulte también el problema de seguimiento de seguridad de Angular 2

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

Sugerencia sobre {{...}}

El contenido desinfectado no puede vincularse usando prop="{{sanitizedContent}}" porque {{}} pone en cadena el valor antes de asignarlo, lo que interrumpe la desinfección.