Angular2组件解析器和ng内容未呈现

我试图同时使用

ComponentResolver

和

ng content

，但是，当解析器构建组件时，转写的内容不会呈现

我用的是Angular2 RC3。我确实知道，

组件解析器

（）即将进行的一些更改可能会影响这一点

导入{
输入，
组成部分，
奥尼特，
ViewContainerRef，
组件分解器，
视图儿童
}从“@angular/core”开始；

/**
*纵队
*/
@组成部分({
选择器：'列组件'，
模板：`
列：{{label}}
`
})
导出类列组件{
@输入（）标签：sting=“”；
}

/**
*细胞
*/
@组成部分({
选择器：'单元组件'，
模板：“单元组件”
})
导出类单元组件{
@ViewChild（'target'，{read:ViewContainerRef}）目标；
建造师(
专用componentResolver:componentResolver，
私有viewContainerRef:viewContainerRef）{
}
恩戈尼尼特（）{
this.componentResolver.resolveComponent（ColumnPonent）.then（（工厂）=>{
让componentRef=this.target.createComponent（工厂，0，this.viewContainerRef.injector）；
});
}
}

/**
*桌子
*/
@组成部分({
选择器：“数据表”，
模板：`
表组件
`,
指令：[单元组件]
})
导出类TableComponent{
}

/**
*ROOOT应用程序
*/
@组成部分({
选择器：“根应用程序”，
模板：`
栏目内容
`,
指令：[ColumnComponent，TableComponent]
})
导出类AppComponent{
}

当前行为：作为

列组件的内容的单词“column content”永远不会呈现

预期行为：
column组件的内部内容（单词“column content”）将呈现


普朗克：
用例：


更新

@GünterZöchbauer回答了我最初的问题（谢谢！），然而，我运用了更多的逻辑，遗憾的是它没有起作用。见更新的plunkr：

预期结果：将为每一行重复单元格，并且
行
的
年龄
属性的值将被转置到每一行。
您还需要向中间组件添加

请在Plunker上添加一个简单的演示什么是“标记”？@yurzui添加了plunkr。预期的行为是什么？@GünterZöchbauer更新：）就是这样，但一旦我应用了更多的逻辑，它就不起作用了…请参阅：我无法从我的手机添加Plunker，但如果您将
与
*ngFor
，这不受支持。正如我所假设的，您尝试在
*ngFor
中使用
。我想你可能会跟着。作为解决方法，您可以使用
/**
 * 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 {

}