Question

我有3个嵌套组件形成一个通用网格组件：MyGrid，MyRow，MyColumn使用时采用下面的形状。我遇到的问题是，无论何时将*myRowItem指令附加到my-row组件，@ContentChildren(MyRowComponent)中的某些MyGrid都找不到该组件，而当我不这样做时使用查询找到所述组件的*myRowItem指令。似乎该指令以某种方式模糊了内容。

我知道通过Angular的desugaring，*myRowItem指令被翻译成<ng-template>...</ng-template>并进行排序，但我在这里遗漏了什么？

用法

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

MyGrid是负责呈现整个表的组件。 MyRow是另一个将列组合在一起的组件，如下所示：

MyRow.ts

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

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

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

MyColumn用于将模板中继到网格（并且还有一些额外的功能，为了便于阅读，我已将其截断）。

MyColumn.ts

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

  ...

  constructor()
  {
  }
}

*myRowItem用于创建一个上下文，其中使用$implicit我可以将值传递给位于MyGrid的* ngFor。

MyRowItem.ts

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

  constructor()
  {
  }
}

MyGrid.ts

@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.html

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

Answer 1

代码中的列选择器是＆＃34; core-column＆＃34;应该是＆＃34; my-column＆＃34;？

Angular4自定义结构指令导致@ContentChildren（）无法找到Component

1 个答案: