Angular2 - получить имя при использовании оболочки динамического загрузчика компонентов для отображения списка компонентов

Я использую динамический загрузчик компонентов для отображения списка компонентов с помощью * 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 мне удалось получить доступ к индексу компонентов, но я не могу понять, как вывести имена компонентов. Я использовал этот 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

Может ли кто-нибудь объяснить, в чем я ошибаюсь? Или, если вы знаете лучший способ получить имя / идентификатор / что-то еще для перемещаемого компонента, я бы хотел его услышать.


angular factory ng2-dragula
person av0000    schedule 07.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я понял это, но был бы признателен за любые отзывы, если я буду следовать лучшим практикам.

Сначала я добавил компонент componentName Input к компонентам, которые будут отображаться D.C.L. нравится:

@Input() componentName = 'whateverComponentNameHere';

А затем добавил к моей фабрике дополнительное свойство для каждого экземпляра, например:

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();
person av0000    schedule 07.04.2017