ng-template innerHTML을 구성 요소로 가져 오는 방법

Question

ng-template의 innerHTML을 구성 요소로 가져오고 싶습니다. 뭔가 당신은 단지 템플릿이 주입 될로 쉘을 요구하기 때문에

<my-comp [template]="myTemplate"></my-comp> 
<ng-template #myTemplate></ng-template> 

TS

export class MyComponent implements OnInit { 

    @Input() template: string | TemplateRef<any>; 

    ngOnInit(){ 
    console.log(this.template); 
    } 

} 

Answer 1

HTML

처럼 지침 대신 구성 요소를 사용하는 것이 좋습니다.

@Directive({ 
    selector: '[template-host]' 
}) 
export class HostDirective{ 

    @Input('template-host') set templateHtml(value){ 
    this.hostElement.innerHTML = value; 
    } 

    private hostElement:HTMLElement; 

    constructor(elementRef:ElementRef){ 
    this.hostElement = elementRef.nativeElement; 
    } 
} 

지금 당신은 어떤 요소에이 지침을 적용 할 수 있고, 그 요소에 HTML 주사의 원인이됩니다 바인딩 template-host를 제공했다.

<!-- The div will contain the html in myTemplate --> 
<div [template-host]="myTemplate"></div> 

클래스가 실제로 템플릿을 가지고 있지만, 그 템플릿의 일부에 HTML을 주입 할 경우

Live demo

이