Angular2 componentresolver和ng-content不渲染

Question

我正在尝试一起使用 ComponentResolver和 ng-content，但是，当解析器构建组件时，未呈现transcluded内容。

我正在使用angular2 rc3。我确实知道ComponentResolver（https://github.com/angular/angular/issues/9467）将有一些即将发生的变化。

import {
  Input, 
  Component, 
  OnInit, 
  ViewContainerRef, 
  ComponentResolver, 
  ViewChild 
} from '@angular/core';

/**
 * COLUMN
 */
@Component({
    selector: 'column-component',
    template: `
      <div style="border:1px solid green; padding:5px;display:block;">
        <b>column: {{label}}</b>
        <ng-content></ng-content>
      </div>`
})
export class ColumnComponent {
  @Input() label: sting = "";
}

/**
 * CELL
 */
@Component({
    selector: 'cell-component',
    template: '<b>cell component</b> <div #target></div>'
})
export class CellComponent {
  @ViewChild('target', {read: ViewContainerRef}) target;
  constructor(
    private componentResolver:ComponentResolver, 
    private viewContainerRef: ViewContainerRef) {
  }
  ngOnInit() {
    this.componentResolver.resolveComponent(ColumnComponent).then((factory) => {
      let componentRef = this.target.createComponent(factory, 0, this.viewContainerRef.injector);
    });
  }
}

/**
 * TABLE
 */
@Component({
    selector: 'datatable',
    template: `
      <div #target style="border:1px solid blue;padding:5px;">
        <b>table component</b>
        <cell-component
           style="border:1px solid yellow;padding:5px;display:block">
         </cell-component>
      </div>
    `,
    directives: [ CellComponent ]
})
export class TableComponent {
}

/**
 * ROOOT APP
 */
@Component({
    selector: 'root-app',
    template: `
      <div style="border:1px solid red;padding:5px;">
        <datatable>
          <column-component [label]="'my label'">
            column content
          </column-component>
        </datatable>
      </div>
    `,
    directives: [ ColumnComponent, TableComponent ]
})
export class AppComponent {
}

当前行为： column-component内容的单词"列内容"永远不会呈现。

预期行为：column-component的内部内容（单词"列内容"）将呈现。

• plunkr：https：//plnkr.co/edit/9inb4yixsfclovtxapkz?p=preview
• 用例：https：//github.com/swimlane/angular2-data-table/tree/templates

---

update

@günterzöchbauer回答了我的Orginial问题（谢谢！），但是，我采用了更多的逻辑，可悲的是它无效。请参阅更新的plunkr： https://plnkr.co/edit/csbmy6wepc3awzlbdy34？p = preview

预期结果：每行重复这些单元格，并且row的age属性的值将转移到每个属性。

Answer 1

您需要将<ng-content>添加到中间组件

plunker示例