홈>

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 ()에서 인스턴스를 만드는 이유는 무엇입니까?
  • 다음 파이썬에서 정규 표현식을 사용하여 텍스트를 문장으로 나누기
    • 트렌드