1

나는 서버에서 HTML 형식의 응답을받는 응용 프로그램에서 작업하고 있습니다. DomSanitizer의 bypassSecurityTrustHtml을 사용하고 위생 된 html을 내 구성 요소()에 추가하고 있습니다.각도 2 : 위생 html/innerhtml에 지침을 적용하려면 어떻게해야합니까?

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

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

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

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

+1

이것은 [innerHTML] = "..."'로는 불가능합니다. 런타임시 구성 요소를 컴파일하여 동적 HTML에 대한 구성 요소 및 지시문을 얻을 수 있습니다. https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with- 각도 –

+0

내 프로젝트에 AoT 편집이 필요합니다. 동적 인 구성 요소는 유망 해 보이지만 AoT에서는 작동하지 않을 것이라고 추측하고 있습니까? 나는 html을 파싱하고 'ngAfterViewInit()'동안 일반 링크로 태그를 변환하기로 결정했다. (routerLink의 단일 페이지 functionallity를 잃어 버림). – clearfix

+0

현재 상태를 알 수 없습니다. 몇 달 전에 그것에 대한 토론이 있었고 함께 작동하도록하는 방법이 있다고 보았습니다. 그 이후로 개선되었거나 악화되었는지는 확실하지 않습니다. 토론은 Angular Github 문제에있었습니다. –

답변

0

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

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"

+0

어떻게 domsanitizer가 작동하는지 알아보십시오. 그것은 내가 이미하고있는 것과 비슷하지만, 컴파일하는 동안 라우터 지시어 (angularLink)를 사용하지 않기 때문에 이것은 나의 질문을 다루지 않는다. – clearfix