컴파일 동적 나는 DOM에 다음 HTML 삽입하는 제 3 자 라이브러리가있는, 구성 요소가 구성 요소

Question

를 기존 HTML을 생성 :

<input (click)="doSomething()"/>{{someText}}

doSomething 내 구성 요소의 기능이, 그리고 {{someText}}은 속성입니다.

이 문자열을 기존 구성 요소로 컴파일하는 방법을 알아 내려고 ComponentFactoryResolver으로 새 문자열을 만들지 않으려 고합니다.

동적 HTML을 추가하고 ChangeDetectorRef.detectChanges() 또는 NgZone.run(callback) 또는 ApplicationRef.tick()을 사용하려고했습니다. 이들 중 어느 것도 HTML을 컴파일하지 않았습니다.

아이디어가 있으십니까?

Answer 1

무엇 ViewContainerRef.createEmbeddedView 사용에 대한 :

템플릿 :

<!-- location in your component template to add the dynamic template --> 
<ng-container #ref></ng-container> 

... 

<!-- dynamic template definition --> 
<ng-template #tpl> 
    <input (click)="doSomething()"/>{{someText}} 
</ng-template> 

구성 요소 클래스 :

당신은 정말 당신의 전략을 변경해야

someText: string; 

@ViewChild('ref') 
vcr: ViewContainerRef; 

@ViewChild('tpl') 
tpl: TemplateRef; 

ngOnInit() { 

    myLib.onSomeEvent(() => { 
    this.vcr.createEmbeddedView(this.tpl); 
    }) 
} 

doSomething() { 
    ... 
}