각도 2 : 위생 html/innerhtml에 지침을 적용하려면 어떻게해야합니까?

Question

나는 서버에서 HTML 형식의 응답을받는 응용 프로그램에서 작업하고 있습니다. DomSanitizer의 bypassSecurityTrustHtml을 사용하고 위생 된 html을 내 구성 요소()에 추가하고 있습니다.

<div thisIsActuallyaLink linkParam1="foo" linkParam2="bar">clickHere</div> 

내가 innerHTML을에 적용되는 지침을 만들고 싶습니다 :

내 문제는 응답의 요소의 몇 가지 요소의 예에서 buildt 할 수있는 링크를 나타내는 태그를 포함하고 있다는 것입니다 html이 표시되는 동안 내 지시문과 함께 컴파일되지 않습니다.

html 변환이 왜 서버 측에서 이루어지지 않는지 궁금한 사람 : 응답은 여러 응용 프로그램에서 사용되며 링크에는 서로 다른 상대 URL이 있어야합니다 응용 프로그램에 따라 :-(

Answer 1

보다이 전혀 [innerHTML]="..." 불가능합니다.
런타임시 구성 요소를 컴파일하여 동적 HTML에 대한 구성 요소 및 지시문을 얻을 수 있습니다.

자세한 내용은 How can I use/create dynamic template to compile dynamic Component with Angular 2.0?을 참조하십시오.

Answer 2

아마 다음과 같이 파이프를 사용해보십시오 :

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({ name: 'safeHTML' }) 
export class SafeHtml implements PipeTransform { 

    constructor(private sanitizer: DomSanitizer) { } 

    transform(html: string) { 
     return this.sanitizer.bypassSecurityTrustHtml(html) 
    } 
} 

및 [innerHtml]="htmlExample | safeHTML"