Angular2에서 원시 html을 바인딩하는 방법

Angular2에서 원시 html을 바인딩하는 방법

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

각도 HTML 바인딩 (24개 답변)

마감됨7년 전에.

저는 Angular 2.0.0-beta.0을 사용하며 간단한 HTML을 직접 만들고 바인딩하고 싶습니다.어떻게 가능합니까?

사용하려고 했습니다.

{{myField}}

하지만 내 필드의 텍스트는 탈출할 것입니다.

Angular 1.x의 경우 ng-bind-html에 대한 히트를 찾았지만 2.x에서는 지원되지 않는 것 같습니다.

프랭크

에 바인딩innerHTML기여하다

두 가지 방법을 통해 달성할 수 있습니다.

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

Angulars DOM sanitizer가 일부를 제거하지 않도록 전달된 HTML을 신뢰할 수 있음으로 표시하려면

<div [innerHTML]="myField | safeHtml"></div>

담뱃대 같은 것을 들고

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

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

언급URL : https://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2