Angular 重写组件中的QueryList

我有基本组件和基本指令：

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

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

@组件({
选择器：“数据表”，
模板：``
})
导出类DatatableComponent{
查询列表列；
}
@指令（{selector:'datatable column'}）
导出类DatatableColumn{}

现在我想用 相同功能性

@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数据表”，
模板：``
})
导出类DFDatatableComponent扩展了DatatableComponent{
查询列表列；
}
@指令（{selector:'df datatable column'}）
导出类DFDatatableColumn扩展DatatableColumn{}

我的问题是为什么这不起作用

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

但这是可行的。如何从基类重写QueryList

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