Angular2 ComponentResolver 和 ng-content 不呈现

Question

我正在尝试同时使用 ComponentResolver 和 ng-content，但是，当解析器构建组件时，嵌入的内容不会呈现。

我正在使用 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 content”永远不会呈现。

预期行为:column-component 的内部内容(单词“column content”)将呈现。

• Plunkr:https://plnkr.co/edit/9inB4yiXsFCLoVTxaPkz?p=preview
• 用例:https://github.com/swimlane/angular2-data-table/tree/templates

---

更新

@GünterZöchbauer 回答了我的原始问题(谢谢!)，但是，我应用了更多的逻辑，遗憾的是它没有用。查看更新的 plunkr: https://plnkr.co/edit/CsbmY6wePC3AWZlBDy34?p=preview

预期结果:单元格将为每一行重复，row 的 age 属性的值将转换为每个单元格.

Answer 1

您需要添加 <ng-content>以及中间组件

Plunker example