angular - angular5에서 innerHtml을 통해 구성 요소로드

내 응용 프로그램에는 9 개의 위젯이 있으며 각 위젯에는 확대 옵션이 있습니다. 확대/축소 옵션을 표시하기 위해 확대/축소 된 구성 요소를 표시하는 공통 확대/축소 구성 요소를 만들었습니다.

확대/축소 옵션을 클릭하면 선택된 구성 요소 이름이 확대/축소 구성 요소로 전달되고 구성 요소 이름과 함께 html 태그를 작성하고 innerHtml을 통해 구성 요소를 표시하려고 시도했지만 확대 된 구성 요소에 구성 요소가 표시되지 않습니다.

mat-progress-bar 정적 html로 시도

와이즈 비즈

 
zoom-component.html

와이즈 비즈

<div  style="border:2px solid green" #dataContainer></div>

오류를 통해 innerHTML을 지시함으로써

 
zoom-component.component.ts

파서 오류 : [{{widget}}]의 열 0에서식이 예상 된 보간 ({{}})

export class ProjectDetailsComponent implements OnInit { @ViewChild('dataContainer') dataContainer: ElementRef; ngOnInit() { this.widget = "<mat-progress-bar></mat-progress-bar>"; this.dataContainer.nativeElement.innerHTML = this.widget; } }