Question

我已经在https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html上完成了教程，并且工作正常：）

现在我想更先进一点。 http://plnkr.co/edit/D1q7Al60m4UK1weRlcmQ?p=preview

我想要的是点击一个名称应该在另一行上打开下面的详细信息。

例如。点击“Luke Skywalker”或“C3PO”应在第一行和第二行之间创建一行并显示详细信息。

我试图动态添加“product-host”属性但不起作用，因为指令期望属性存在。

<div *ngFor="let person of persons.results" fxFlex="50%" fxFlex.gt-sm="33%" person-host>

Answer 1

我会用ViewChildren来实现它。有两种可能的方式：

1）只需在showPerson函数

中传递索引即可

<强>模板

 <div *ngFor="let person of persons.results; let i = index" fxFlex="50%" fxFlex.gt-sm="33%" person-host>
   <md-card (click)="showPerson(person, i)">{{person.name}}</md-card>
 </div>

然后用它来确定信息卡所需的位置

<强>组件

activatedViewContainerRef: ViewContainerRef;

@ViewChildren(PersonInjectorDirective) personHosts: QueryList<PersonInjectorDirective>;

loadPerson(person, index) {
  if(this.activatedViewContainerRef) {
    this.activatedViewContainerRef.clear();
  }
  let componentFactory = this._componentFactoryResolver.resolveComponentFactory(PersonComponent);
  this.activatedViewContainerRef = this.personHosts.find((item, i) => i === index).viewContainerRef;

  let componentRef = this.activatedViewContainerRef.createComponent(componentFactory);
  (<PersonComponent>componentRef.instance).person = person;
}

showPerson(person, index: number) {
  this.loadPerson(person, index % 2 ? index : index + 1);
}

ngOnDestroy() {
  if(this.activatedViewContainerRef) {
    this.activatedViewContainerRef.clear();
  }
}

<强> Plunker Example

2）您也可以在没有PersonInjectorDirective的情况下构建它。在这种情况下，您需要声明模板变量（#refs）：

<div *ngFor="let person of persons.results; let i = index" fxFlex="50%" fxFlex.gt-sm="33%" #refs>
  <md-card (click)="showPerson(person, i)">{{person.name}}</md-card>
</div>

并更改ViewChildren表达式如下：

@ViewChildren('refs', { read: ViewContainerRef}) personHosts: QueryList<ViewContainerRef>;

<强> Plunker Example

在* ngFor中单击时注入组件

1 个答案: