Angular2 - 내가 가진 구성 요소 목록을 표시하는 동적 구성 요소 로더를 사용하고 구성 요소

Question

의

을 목록을 표시하는 동적 구성 요소 로더 래퍼를 사용할 때 이름을 얻을 * ngFor : 유형의 배열 인으로

<div [dragula]='"bag-one"' [dragulaModel]='types'> 
    <div *ngFor="let component of types; let i = index"> 
    <dcl-wrapper [type]="component" [index]="i"></dcl-wrapper> 
    </div> 
</div> 

: types = [ TestAComponent, TestBComponent, TestCComponent];

dcl-wrapper 구성 요소 내에서 구성 요소 색인에 액세스 할 수 있었지만 구성 요소 이름을 출력하는 방법을 알 수 없습니다. 난 당신이 모든 코드를 원하는 경우 예를 들어 this question에서 this plnkr을 사용하지만,이 부분에 대한 관련 코드를 다음과 같습니다

export class DclWrapperComponent { 

    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() type; 
    @Input() 
    set name(component: string){ 
     this.name = component; 
    } 
    @Input() 
    set index(i: number){ 
     this._index = i; 
     console.log("Item index changed: ", this._index, this.name); 
    } 

...

내가 얻을 :

Item index changed: 0 undefined 
Item index changed: 1 undefined 
Item index changed: 2 undefined 

아무도 내가 잘못 가고 있다고 설명 할 수 있습니까? 또는 이동중인 구성 요소의 이름/ID/기타를 가져 오는 더 좋은 방법을 알고 있다면 그 정보를 듣고 싶습니다.

Answer 1

나는 이것을 알아 냈으나 모범 사례를 따르면 모든 의견에 감사 할 것입니다.

먼저 componentName 입력을 D.C.L.에 표시 할 구성 요소에 추가했습니다. 같은 :

let factory = this.componentFactoryResolver.resolveComponentFactory(this.type); 
this.cmpRef = this.target.createComponent(factory) 

console.log(this.cmpRef.instance.componentName + ": " + this._index); 
^^^Can access like this. 

this.cdRef.detectChanges(); 

: 다음

@Input() componentName = 'whateverComponentNameHere'; 

그리고이 같은 각 인스턴스 내 공장에 추가 속성을 추가