Как получить свойство HTML в машинописи

Question

У меня есть <mat-paginator> в * .component.html, свойства которого определены ниже:

 <mat-paginator #paginator
  [pageSize]="10"
  [pageSizeOptions]="[5, 10, 20]"
  (page)="onPaginateChange($event)">
</mat-paginator>

Можно ли получить свойство pageSize в моем * .component.ts?

Попытка ссылки на собственный HTML-элемент, но безрезультатно

Спасибо!

Answer 1

Вы можете получить доступ к размеру страницы, используя ViewChild

вот пример

export class PaginatorOverviewExample {

  @ViewChild('paginator') paginator;

  ngAfterViewInit(){
    console.log(this.paginator.pageSize)
  }
}

HTML

<mat-paginator #paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

Stackblitz демо

Answer 2

Я думаю, вы можете получить mat-paginator через @ViewChild декоратор и попытаться получить к нему доступ через ngAfterViewInit ловушку событий жизненного цикла.

@ViewChild('paginator') paginator;

ngAfterViewInit() {
   console.log(this.paginator.pageSize)
}

Также при просмотре документации она дает вам pageSize в событии page

PageEvent Изменить объект события, который генерируется, когда пользователь выбирает другой размер страницы или переход на другую страницу.

pageSize: number - Текущий размер страницы