RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가 할 수 없습니다.

RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가 할 수 없습니다.

---

같은 스타일

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

더 이상 추가되지 않습니다

---

업데이트 (2.0.0 최종)

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);
  }
}

참조 https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

최신 정보

DomSanitizationServiceDomSanitizerRC.6에서 로 이름이 변경됩니다 .

실물

이것은 RC.2에서 수정되어야합니다.

참조 보안 - Angular2 개발자 가이드

---

Angular2 는 RC.1 [innerHTML]=...과 같은 CSS 값 및 속성 바인딩의 [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 예제 (Angular 2.0.0-rc-1)

See also Angular 2 Security Tracking Issue

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

Hint about {{...}}

Sanitized content can't be bound using prop="{{sanitizedContent}}" because {{}} stringyfies the value before it is assigned which breaks sanitization.

참고URL : https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax