Как получить ссылку на повторно используемый дочерний компонент, внутри которого находится mat-paginator, в Angular 9 - PullRequest
Новая
       6

Как получить ссылку на повторно используемый дочерний компонент, внутри которого находится mat-paginator, в Angular 9

0 голосов
/ 26 февраля 2020

Я создал компонент mat-table из дизайна материала, который можно многократно использовать вместе с другим компонентом mat-paginator.

В представлении компонентов я использую оба компонента по отдельности. Но я sh смогу получить ссылку на эти 2 компонента, чтобы я мог просмотреть каждый из них, таблицу для matSort и нумерацию страниц для разбивки на страницы.

Если я сделаю следующее:

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

Чтобы затем извлечь его как: 

@ViewChild('paginator') paginator: MatPaginator

this.paginator имеет ссылку, но выдает исключение на консоли TypeError: You provided 'undefined' where a stream was expected... возможно, потому что я не устанавливаю ссылку непосредственно на мат-пагинатор, но к пользовательскому компоненту?

На данный момент это мой код пагинатора: 

<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>

То же самое мне нужно сделать с моей пользовательской мат-таблицей, как я могу получить доступ к ссылке, чтобы я мог установить ее в dataSource? Использование Angular 9 и Mat 9.

1 Ответ

1 голос
/ 26 февраля 2020

Полученная ошибка не имеет отношения к проблеме ViewChild.

paginator тип будет вашим компонентом-виджетом, а не MatPaginator .

Вы можете добавить @ViewChild в виджет paginator:

@ViewChild(MatPaginator) paginator: MatPaginator;

И из родительского доступа сделать это в экземпляре PaginatorWidgetComponent: 

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