Angular4导致@ContentChildren（）找不到组件的自定义结构指令

我有3个嵌套组件构成了一个通用网格组件：

MyGrid

、

MyRow

、

MyColumn

，它们在使用时的形状如下所示。我遇到的问题是，每当我将

*myRowItem

指令附加到

myrow

组件时，位于

MyGrid

中的一些

@ContentChildren（MyRowComponent）

都找不到该组件，而当我不使用

*myRowItem

指令时，查询会找到所述组件。似乎指令在某种程度上模糊了内容

我知道通过Angular的desugaring，

*myRowItem

指令被转换成

…

并进行排序，但我是否遗漏了什么

用法

<my-grid [data-source]="dataSource">
    <my-row *myRowItem="let item">
        <my-column column-header="Person">
            {{item.name}}
        </my-column>

        <my-column column-header="Age">
            {{item.age}}
        </my-column>

        <my-column column-header="Car">
            {{item.car}}
        </my-column>
    </my-row>
</my-grid>

MyColumn

用于将模板转发到网格（并且具有一些额外的功能，为了可读性，我已经截断了这些功能）

MyColumn.ts

@Component({
  selector: 'my-row',
  template: `<ng-content></ng-content>`,
})
export class MyRowComponent 
{

  @ContentChildren(MyColumnComponent)
  public columns: QueryList<MyColumnComponent>;

  /**
   * Class constructor
   */
  constructor()
  {
  }
}

@Component({
   selector: 'my-column',
   template: `<ng-container *ngIf="..."><ng-content></ng-content></ng-container>`
})
export class CoreColumnComponent
{

  ...

  constructor()
  {
  }
}

@Directive({
  selector: '[myRowItem]',
})
export class MyRowItemDirective
{

  constructor()
  {
  }
}

@Component({
  selector: 'my-grid',
  templateUrl: 'my-grid.html'
})
export class MyGridComponent implements AfterViewInit
{

   ...

  /**
   * My item directive (IS BEING POPULATED AND I CAN RENDER THROUGH IT)
   */
  @ContentChild(MyRowItemDirective, { read: TemplateRef })
  public rowTemplate: TemplateRef<MyRowItemDirective>;

  /**
 * My row component (IS NOT BEING POPULATED)
 */
  @ContentChild(MyRowComponent)
  public rowDefinition: MyRowComponent;


  constructor()
  {
  }

  ngAfterViewInit(): void
  {
    let x = this.rowDefinitions; // BEING EMPTY HERE
  }

}

MyGrid.ts

@Component({
  selector: 'my-row',
  template: `<ng-content></ng-content>`,
})
export class MyRowComponent 
{

  @ContentChildren(MyColumnComponent)
  public columns: QueryList<MyColumnComponent>;

  /**
   * Class constructor
   */
  constructor()
  {
  }
}

@Component({
   selector: 'my-column',
   template: `<ng-container *ngIf="..."><ng-content></ng-content></ng-container>`
})
export class CoreColumnComponent
{

  ...

  constructor()
  {
  }
}

@Directive({
  selector: '[myRowItem]',
})
export class MyRowItemDirective
{

  constructor()
  {
  }
}

@Component({
  selector: 'my-grid',
  templateUrl: 'my-grid.html'
})
export class MyGridComponent implements AfterViewInit
{

   ...

  /**
   * My item directive (IS BEING POPULATED AND I CAN RENDER THROUGH IT)
   */
  @ContentChild(MyRowItemDirective, { read: TemplateRef })
  public rowTemplate: TemplateRef<MyRowItemDirective>;

  /**
 * My row component (IS NOT BEING POPULATED)
 */
  @ContentChild(MyRowComponent)
  public rowDefinition: MyRowComponent;


  constructor()
  {
  }

  ngAfterViewInit(): void
  {
    let x = this.rowDefinitions; // BEING EMPTY HERE
  }

}

@组件({
选择器：“我的网格”，
templateUrl:'my grid.html'
})
导出类MyGridComponent实现AfterViewInit
{
...
/**
*My item指令（正在填充，我可以通过它进行渲染）
*/
@ContentChild（MyRowItemDirective，{read:TemplateRef}）
公共行模板：TemplateRef；
/**
*我的行组件（未填充）
*/
@ContentChild（MyRowComponent）
公共行定义：MyRowComponent；
构造函数（）
{
}
ngAfterViewInit（）：void
{
设x=this.rowDefinitions；//此处为空
}
}

MyGrid.html

<table>
  <tbody>
    <ng-container *ngFor="let row of dataSource" [ngTemplateOutlet]="rowTemplate" [ngOutletContext]="{$implicit: row}"></ng-container>
  </tbody>
</table>

代码中的列选择器是“核心列”，应该是“我的列”

您是否尝试过使用setter或订阅QueryList的更改？ContentChild/ContentChildren在您的结构目录中调用

createEmbeddedView

之前，我们不会填充内容。有趣的是，您能创建一个plunker吗？没错，在将项目重命名为示例时键入错误。