Angular2 innerHtml 바인딩 제거 스타일 속성

Angular2 innerHtml 바인딩 제거 스타일 속성

이 질문에는 이미 다음과 같은 답이 있습니다.

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

마감됨6년 전에.

내 문제는, 내가 innererHtml 바인딩 -angular2를 사용할 때 모든 스타일 속성을 제거한다는 것입니다.제 작업에서 HTML은 모든 스타일로 서버 측에서 생성되기 때문에 저에게 중요합니다.예:

@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>";
  }
}

그러나 DOM에서는 1234만 보이고 이 텍스트는 빨간색이 아닙니다.

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

감사해요!

활용할 수 있습니다.DomSanitized그것을 피하기 위해.

가장 쉬운 방법은 다음과 같은 사용자 지정 파이프를 만드는 것입니다.

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

따라서 다음과 같이 사용할 수 있습니다.

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

플런커 예제

필요한 가져오기를 완료하여 yurzui의 예를 조금 개선했습니다.

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

또한 app.module.ts 파일에 클래스를 추가해야 했습니다.

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

참고:sanitizer컨텐츠를 신뢰할 수 있는 몇 가지 방법이 있습니다.

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

https://stackoverflow.com/a/41089093/142714 를 통해

그렇게,bypassSecurityTrustStyleHTML 컨텐츠 내의 인라인 스타일을 보여주기 때문에 여기서 원하는 것일 수도 있습니다.value).

문서: https://angular.io/api/platform-browser/DomSanitizer

언급URL : https://stackoverflow.com/questions/39628007/angular2-innerhtml-binding-remove-style-attribute