子元素无法识别父母指令扩展了材料指令

Question

我正在扩展角材的MatSort指令，以允许按多列进行排序。我在matTable上使用指令。我收到一个错误，指出MatSortHeader必须包含在matSort中。

这是指令

export class MySortDirective extends MatSort{
  constructor() {
    super()
   }
   rules: Sort[] = [];

   sort = (sortable: MatSortable): void => {
    console.log(sortable,'hi')
    if (this.active != sortable.id) {
      this.active = sortable.id;
      this.direction = sortable.start ? sortable.start : this.start;
      this.rules.unshift({active: this.active, direction: this.direction});
    } else {
      this.direction = this.getNextSortDirection(sortable);
      this.rules=this.rules.filter(r=>r.active!=this.active);
      if(this.direction)this.rules.unshift({active: this.active, direction: this.direction});
    }
  }
}

此处是相关组件。（使用Lodash orderBy）

@ViewChild(MySortDirective) sort: MySortDirective;

  data:MatTableDataSource<{}> = new MatTableDataSource(this.votes);

  ngOnInit() {
    this.data.sort = this.sort
    this.data.sortData = (data:{}[],sort:MySortDirective)=>orderBy(data,sort.rules.map(r=>r.active),sort.rules.map(r=>r.direction as direc));
  }

这是相关的HTML

<mat-table [dataSource]=data mySort >
    <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="votes">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.votes}} </td>
      </ng-container>
</mat-table>

如何通知mySort扩展了matSort的mat-sort-header组件。