角度 – 在RC.1中,某些样式无法使用绑定语法添加
样式如
<div [style.background-image]="'url(' + image + ')'">Background</div> <div [style.transform]="rotate(7deg)" 不再加了
update(2.0.0 final)
import { Pipe } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({name: 'safeHtml'}) export class SafeHtml { constructor(private sanitizer:DomSanitizer){} transform(html) { return this.sanitizer.bypassSecurityTrustHtml(html); } } <div [innerHTML]="someHtml | safeHtml" 更新 DomSanitizationService将在RC.6中重命名为DomSanitizer 原版的 这应该在RC.2中解决 参见Angular2 Developer Guide – Security Angular2在RC.1中引用了CSS值和属性绑定的消息,如[innerHTML] = …和[src] =“…” 参见https://github.com/angular/angular/issues/8491#issuecomment-217467582 可以使用DomSanitizer.bypassSecurityTrustStyle(…)将值标记为可信任值 import {DomSanitizer} from '@angular/platform-browser'; ... constructor(sanitizer: DomSanitizationService) { this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')'); // for HTML // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...); } 并绑定到该值,而不是不可信的纯字符串。 这也可以包裹在管道中 @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> 同 someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`; 仍然在工作: – [(正在进行中) Plunker example 参见Angular 2 Security Tracking Issue 和https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html 关于{{…}}的提示 使用prop =“{{sanitizedContent}}”无法绑定消毒内容,因为{{}}在分配清除消毒之前对该值进行stringyfies。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |