angular - コンポーネントで QueryList をオーバーライドする

Question

基本コンポーネントと基本ディレクティブがあります:

@Component({
    selector: 'datatable',
    template: `<ng-content><ng-content>`
})
export class DatatableComponent {
    QueryList<DatatableColumn> columns;
}

@Directive({ selector: 'datatable-column' })
export class DatatableColumn { }

そして今、同じ機能を持つ拡張 DatatableComponent を作成したい

@Component({
    selector: 'df-datatable',
    template: `<ng-content><ng-content>`
})
export class DFDatatableComponent extends DatatableComponent {
    QueryList<DFDatatableColumn> columns;
}
 @Directive({ selector: 'df-datatable-column' })
    export class DFDatatableColumn extends DatatableColumn  { }

私の質問は、なぜこれが機能しないのですか?

<df-datatable>
    <df-datatable-column>
    </df-datatable-column>
</df-datatable>

しかし、これは機能します。基本クラスから QueryList をオーバーライドする方法は?

<df-datatable>
    <datatable-column>
    </datatable-column>
</df-datatable>