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

更新

@GünterZöchbauer回答了我的问题（谢谢！），然而，我应用了更多的逻辑，遗憾的是它没有用。查看更新的plunkr： https://plnkr.co/edit/CsbmY6wePC3AWZlBDy34?p=preview

预期结果：将为每一行重复单元格，row的{{1}}属性的值将转换为每个。

Answer 1

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

Plunker example

Angular2 ComponentResolver和ng-content不呈现

1 个答案: