각도 4 | innerHTML에 채울 iframe

Question

문제가 있습니다.

일부 HTML 콘텐츠를 반환하는 API에 가입했습니다. 때로는 iframe이 있습니다. 그러나 iframe 만로드되지 않고 대신 브라우저에 문자열로 표시됩니다.

구성 요소 파일 코드 아래에서 확인하시기 바랍니다

this._EmittersService.longDescemitted$.subscribe(obj => { 
    this.longDesc = obj; 
});` 

html 파일

<div class="description-panel" [innerHTML]="longDesc" ></div>

문제 :

this.longDesc = "<iframe width="something" height="something" src="something" ></iframe>"

문자열로 표시되며 iframe이없는 것으로 감지되지 않습니다. 각도를 HTML로 렌더링 할 수 있도록 각도가 필요합니다.

Answer 1

1 단계 : 수입

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

단계 2 TS 파일의 다음 부분 : perticular TS에서 정의 생성자

constructor(private domSanitizer:DomSanitizer) {} 

단계 3 파일을 요구에 따라 TS 파일 코드 아래 -USE를 (메서드/함수 또는 생성자)

this._EmittersService.longDescemitted$.subscribe(obj => { 
     this.longDesc = this.domSanitizer.bypassSecurityTrustHtml(obj or any html content); 
or 
this.longDesc = this.domSanitizer.bypassSecurityTrustHtml('<iframe width="something" height="something" src="something" ></iframe>') 
    });