[angular] 각도 HTML 바인딩

Angular 2.0.0 및 Angular 4.0.0 최종

안전한 콘텐츠를 위해

<div [innerHTML]="myVal"></div>

DOMSanitizer

잠재적 인 안전하지 않은 HTML은 Angulars DOM 소독제를 사용하여 명시 적으로 신뢰할 수있는 것으로 표시되어야하므로 잠재적으로 안전하지 않은 콘텐츠 부분을 제거하지 않습니다

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

같은 파이프로

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

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

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

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

보안 경고

사용자가 추가 한 HTML을 신뢰하면 보안 위험이 발생할 수 있습니다. 앞에서 언급 한 문서 상태 :

bypassSecurityTrust...API를 호출하면 전달 된 값에 대해 Angular의 내장 된 살균이 비활성화됩니다.이 호출에 들어가는 모든 값과 코드 경로를주의 깊게 확인하고 감사하십시오. 이 보안 컨텍스트에 대해 사용자 데이터가 적절하게 이스케이프되었는지 확인하십시오. 자세한 내용은 보안 안내서를 참조하십시오 .

각도 마크 업

같은 것

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

와

<div [innerHTML]="foo"></div>

Angular는에서 Angular 관련 항목을 처리하지 않습니다foo . Angular는 빌드시 Angular 특정 마크 업을 생성 된 코드로 대체합니다. 런타임에 추가 된 마크 업은 Angular에 의해 처리되지 않습니다 .

Angular 관련 마크 업 (속성 또는 값 바인딩, 구성 요소, 지시문, 파이프 등)이 포함 된 HTML을 추가하려면 런타임에 동적 모듈을 추가하고 구성 요소를 컴파일해야합니다. 이 답변은 자세한 내용을 제공합니다. 동적 템플릿을 사용하여 동적 구성 요소를 Angular 2.0으로 컴파일하는 방법은 무엇입니까?

답변

<div #dataContainer></div>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

<p [innerHTML]="{{item.anleser}}"></p>

<p [innerHTML]="item.anleser"></p>

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

<div [safeHtml]="myVal"></div>

<div [innerHTML]=componementVariableThatHasTheHtml></div>