如何获取 Angular 9 中包含 mat-paginator 的可重用子组件的引用

Question

我mat-table根据材料设计创建了一个组件，它可以与另一个mat-paginator组件一起重复使用。

从组件的角度来看，我分别使用两者。但我希望我可以获得这两个组件的引用，这样我就可以 ViewChild 每个组件、matSort 的表格和分页的分页器。

如果我执行以下操作：

<custom-paginator #paginator .... />

然后将其检索为：

@ViewChild('paginator') paginator: MatPaginator

this.paginator 具有引用，但在控制台上抛出异常，TypeError: You provided 'undefined' where a stream was expected...可能是因为我没有直接将引用设置为 mat-paginator，而是设置为自定义组件？

这是我目前的分页器代码：

<mat-paginator
    [length]="length"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageChange($event)">
</mat-paginator>

这就是我使用它的方式：

<paginator-widget
   #paginator
   [length]="dataSource?.filteredData.length"
   pageSize="25"
   (page)="handlePageChange($event)">
</paginator-widget>

我需要对自定义 mat-table 执行同样的操作，如何访问引用以便将其设置为 dataSource？使用 Angular 9 和 Mat 9。

Answer 1

您收到的错误听起来与 ViewChild 问题无关。

paginatortype 将是您的 paginator-widget 组件，而不是MatPaginator。

您可以添加@ViewChild到分页器小部件：

@ViewChild(MatPaginator) paginator: MatPaginator;

并从父级在 PaginatorWidgetComponent 实例中访问它：

@ViewChild('paginator') paginatorWidget: PaginatorWidgetComponent;    
...
console.log(this.paginatorWidget.paginator)