Angular 角度2：使用静态渲染表的组件<；td>；s和动态<；td>；它来自另一个组件

我有一个Angular 2组件，它用kitten对象数据呈现一个漂亮的表

由于某些列将在不同的组件中重用，因此我正在寻找一种方法，将

提取到一个单独的组件中（

dynamic kitten tds

）。我无法移动呈现

kitten.name

和

kitten.lastwash

的

s，因为它们是

cat-o-base

组件的唯一属性：

cat-o-base.component.html 限制1 我可以不使用

*ngFor

如下：

<td *ngFor="let preference of kitten.preferences">{{ preference | json }}</td>

<td>{{ kitten.name }}</td>
<td *ngFor="let preference of kitten.preferences" [value]="preference"></td>
<td>{{ kitten.lastWashed | date }}</td>

{{kitten.name}
{{kitten.lastwash | date}

此限制来自必须作为

动态kitten tds

组件的一部分实现的业务逻辑

限制2 代码必须产生有效的DOM发射

问题: 我如何做到这一点？使用辅助组件是可以的。使用特殊的结构指令也很好

附笔

---

我查看了其他一些SO问题（如），但没有找到完全匹配的问题定义。

如果使用辅助组件很好，我的想法如下：

动态插座.ts

@Directive({selector: '[dynamicOutlet]'})
export class DynamicOutlet implements OnChanges, OnDestroy {
  @Input() dynamicOutlet: Type<any>;
  @Input() dynamicOutletModel: any;

  private componentRef: ComponentRef<any> = null;

  constructor(private vcRef: ViewContainerRef) {}

  ngOnChanges(changes: SimpleChanges) {
    this.vcRef.clear();
    this.componentRef = null;

    if (this.dynamicOutlet) {
      const elInjector = this.vcRef.parentInjector;
      const componentFactoryResolver = elInjector.get(ComponentFactoryResolver);

      const componentFactory = componentFactoryResolver.resolveComponentFactory(this.dynamicOutlet);
      this.componentRef = componentFactory.create(elInjector);

      this.componentRef.changeDetectorRef.detectChanges();
      this.componentRef.instance.model = this.dynamicOutletModel;
      this.vcRef.createEmbeddedView(this.componentRef.instance.template, { $implicit: this.dynamicOutletModel });
    }
  }

  ngOnDestroy() {
    if(this.componentRef) {
      this.vcRef.clear();
      this.vcRef = null;
    }
  }
}

@Component({
    selector: 'kitten-component',
    template: `
      <ng-template let-model>
        <td *ngFor="let preference of model.preferences">{{ preference | json }}</td>
      </ng-template>
    `
})
export class Kitten {
  @ViewChild(TemplateRef) template: TemplateRef<any>;

  model: any;
}

不要忘记将

Kitten

组件添加到

entryComponents

数组中

---

这里是

我实际上以不同的方式解决了它（稍后将发布我的解决方案），但是你的帖子也很有效，所以我接受它。谢谢你的时间和努力@yurzui！

@Component({
    selector: 'kitten-component',
    template: `
      <ng-template let-model>
        <td *ngFor="let preference of model.preferences">{{ preference | json }}</td>
      </ng-template>
    `
})
export class Kitten {
  @ViewChild(TemplateRef) template: TemplateRef<any>;

  model: any;
}

<ng-container *dynamicOutlet="kittenComp; model: kitten"></ng-container>

kittenComp = Kitten;