angular - 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中的这个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

所以我想出了这一点，但如果我遵循最佳实践，我将不胜感激。

首先，我向将由 DCL 显示的组件添加了一个 componentName 输入，如下所示：

@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();