2016-10-19 4 views
2

사용자 정의 html과 스크립트 문자열을 반환하는 api endpoint가 있습니다. angular2에게 안전한 html로 알려주고 컴포넌트 템플릿으로 렌더링해야합니다. 지금까지 내 코드 : 내 템플릿에서angular2 구성 요소에 사용자 정의 스크립트를 삽입하십시오.

import { Component } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.template.html', 
}) 
export class AppComponent { 

    public htmlToRender: any; 

    constructor(
     private _sanitizer: DomSanitizer, 
    ) {} 

    public ngOnInit(): void { 

     const html = ` 
      <p>Hello</p> 
      <p id="a"></p> 
      <script> 
       document.getElementById("a").innerHTML = "World" 
       console.log(111); 
      </script> 
     `; 

     this.htmlToRender = this._sanitizer.bypassSecurityTrustHtml(html); 
    } 

} 

나는이 :

'<div [innerHTML]="htmlToRender"></div>' 

그러나이 작동하지 않습니다. HTML 및 스크립트 태그는 템플릿으로 렌더링되지만 스크립트는 실행되지 않습니다.

답변

0

angular2는 템플릿을 컴파일하여 상위 html로 렌더링합니다. 그러나 모든 스크립트를 실행할 것입니다. 따라서 서버에서 html로 <script>을 추가 할 수 없습니다.

아마도 ngAfterViewInit 구성 요소로 시도해 볼 수 있습니다. 예를 들어 ngAfterViewInit() 함수에서 스크립트를로드하고 js 함수 eval()을 사용하여 계산합니다.

+0