홈>2020-02-01 00:41

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;
}
}

angular

답변 # 1
첫 번째 문제구문 오류입니다. coz의 오류는 다음과 같습니다.
와이즈 비즈
다음에서 변경 :
```
 Parser Error: Got interpolation ({{}}) where expression was expected
  at column 0 in [{{widget}}]
```
to
```
[innerHTML]="{{widget}}"
```
두 번째 문제: 구성 요소를 동적으로로드하려면 innerHtml을 사용할 수 없으므로componentFactoryResolver
를 사용해야합니다. [innerHTML]="widget"

이전 node.js - http가 아닌 eventsEventEmitter ()에서 인스턴스를 만드는 이유는 무엇입니까?

다음 파이썬에서 정규 표현식을 사용하여 텍스트를 문장으로 나누기

트렌드

Python2.net

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