@ContentChildren（）によってコンポーネントが見つからないようにするAngular4カスタム構造指示

Question

一般的なグリッドコンポーネント：MyGrid、MyRow、MyColumnを使用すると、以下のような形状になります。私が持っている問題は、my-rowコンポーネントに*myRowItemディレクティブを添付するたびに、@ContentChildren(MyRowComponent)にあるコンポーネントがMyGridに見つかりませんでしたが、*myRowItemディレクティブを使用しないと、コンポーネントがそのコンポーネントを検出しました。その指示が何らかの形で内容を不明瞭にしているようです。

Angular's 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は別の列が一緒にそうように定義されたグループの構成要素である：（グリッドまでのテンプレートを中継するために使用される

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

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

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

MyColumn

MyRow.tsと私はきたいくつかの追加機能を持っています読みやすいように切り捨てられています）。

MyColumn.ts

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

    ... 

    constructor() 
    { 
    } 
} 

*myRowItemMyGridに配置* ngForに$implicit I缶パイプ値を使用するコンテキストを作成するために使用されます。

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

カラムセレクタ私の列でなければならない "コア列"ですか？