Angular2 ComponentResolver и ng-content not rendering

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-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

Ожидаемые результаты: клетки будут повторяться для каждой строки и значения age атрибуте row «s будет транспонированная к каждому.

Answer 1

Вам нужно добавить <ng-content> промежуточные компоненты, а

Plunker example