ngFor에서 동적으로 구성 요소를 추가합니다.

Question

구성 된 요소를로드하는 "대시 보드"가 있습니다. 비표준 요소를 소독 얻을 때문에

<div class="dash-container" [ngGrid]="gridConfig"> 
    <div *ngFor="let box of boxes; let i = index" 
     [(ngGridItem)]="box.config" 
     (onItemChange)="updateItem(i, $event)" 
     (onResize)="onResize(i, $event)" 
     (onDrag)="onDrag(i, $event)" 
     (onDragStop)="onDragStop(i,$event)" 
     [ngClass]="box.class" 
    > 
     <div class="handle"><h4>{{box.title}}</h4></div> 
     <div [innerHTML]= "box.content"></div> 
    </div> 
    </div> 

지금 <div [innerHTML]= "box.content"></div>가 작동하지 않습니다 대시 보드 템플릿이 있습니다. 최신 각도 2.4.6 (RC 6) 실행.

내가 동적 구성 요소에 대해 찾을 수있는 예제를 살펴 봅니다.하지만 모든 구성 요소는 현재 구성 요소에 구성 요소를 추가하기 만합니다. 그러나 위 예제에서와 같이 특정 div에 필요합니다.

은 종종 @ViewChild과 함께 사용됩니다. 하지만 난 그냥 루프 내에서이 작업을 수행 할 수 없습니다

ngAfterViewInit() { 
    const dashWidgetsConf = this.widgetConfigs(); 
    for (var i = 0; i < dashWidgetsConf.length; i++) { 
     const conf = dashWidgetsConf[i]; 

     @ViewChild(conf.id, {read: ViewContainerRef}) var widgetTarget: ViewContainerRef; 

     var widgetComponent = this.componentFactoryResolver.resolveComponentFactory(UnitsComponent); 
     widgetTarget.createComponent(widgetComponent); 
    } 
    } 

@viewchild은 '장식이 여기에 유효하지 않은'제공합니다. 내 구성 요소에서 conf 목록 (구성 요소)에있는 구성 요소를로드하고 특정 div (divs는 #{{conf.id}}) 안에 추가 할 수 있습니까?

Answer 1

몇 가지 연구가 끝난 후 이것이 해결책이되었습니다 (4.0.0에서 작동 함).

로드 ID로 모든 ViewContainerRef 대상 :

이

@ViewChildren('dynamic', {read: ViewContainerRef}) public widgetTargets: QueryList<ViewContainerRef>; 

그런 다음 루프는 그 대상을 얻을 이상, 구성 요소의 공장을 만들고 createComponent를 호출합니다.
또한 구성 요소 참조를 사용하여 다른 구성 요소 등록을 구독하거나 설정할 수 있습니다.

<div *ngFor="let box of boxes; let i = index" > 
    <ng-template #dynamic></ng-template> 
</div> 

그리고 목표의 순서 : 제목 같은 구성 요소 ID 등 템플릿에서 다음

- widgetComponents

ngAfterViewInit() { 
    const dashWidgetsConf = this.widgetConfigs(); 
    const widgetComponents = this.widgetComponents(); 
    for (let i = 0; i < this.widgetTargets.toArray().length; i++) { 
     let conf = dashWidgetsConf[i]; 
     let component = widgetComponents[conf.id]; 
     if(component) { 
      let target = this.widgetTargets.toArray()[i]; 
      let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component); 
      let cmpRef: any = target.createComponent(widgetComponent); 

      if (cmpRef.instance.hasOwnProperty('title')) { 
       cmpRef.instance.title = conf.title; 
      } 
     } 
    } 
} 

은 내가 특정 구성 요소 정보를 저장 {key: component} 및 widgetConfigs는 객체이다 내 conf와 동일합니다 (boxes이 생성됩니다) - 그래서 나는 그들을 순서대로 사용할 수 있고 올바른 conf와 구성 요소를 얻기 위해 색인으로 사용할 수 있습니다.