Угловой материал - нумерация страниц не работает после разрешения маршрута

Question

Я использую angular-material 2 для создания таблиц. У меня есть случай, когда я разрешаю данные перед загрузкой страницы, все работает нормально, но проблема в том, что после этого не работает разбиение на страницы.

водители-routing.module.ts

const routes: Routes = [{
  path: '',
  component: MainListingComponent,
  children: [

    {
      path: 'new-requests',
      component: NewRequestsComponent,
      resolve: {
        resolvedData: RouteResolverService
      },
      data: {
        apiUrl: Globals.urls.driver.getDrivers,
        params: {
          offset: 0,
          limit: 10,
          newRequests: true,
          isComplete: 2
        },
        methodType: 'POST'
      }
    }
  ]
}];

Я создал сервис под названием RouteResolverService

маршрутный resolver.service.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { HttpService } from './http-service';
@Injectable({
  providedIn: 'root'
})
export class RouteResolverService {

  constructor(private httpService: HttpService) { }

  resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const url = route.data['apiUrl'];
    const methodType = route.data['methodType'];
    const params = route.data['params'];

    console.log(params)
    if (methodType === 'GET') {
      return this.httpService.getRequest(url, params, false);
    } else if (methodType === 'POST') {
      return this.httpService.postRequest(url, params, false);
    } else if (methodType === 'PUT') {
      return this.httpService.putRequest(url, params, false);
    } else if (methodType === 'DELETE') {
      return this.httpService.deleteRequest(url, params, false);
    }
  }
}

Это файл моих компонентов, в который я получаю данные, возвращаемые с сервера.

новый-requests.component.ts

constructor(public service: HttpService, public toastr: ToastrService, private route: ActivatedRoute) {
    this.route.data.subscribe(data => {
      this.dataSource = data['resolvedData'].data.drivers
      this.isLoadingResults = false;
      this.resultsLength = data['resolvedData'].data.count;
      this.totalRecords = this.dataSource ? this.dataSource.length : 0;
    });
  }

Теперь ранее я вручную вызывал функцию getNewRequests в ngAfterViewInit, поскольку я не разрешал данные. Как это

 ngAfterViewInit() {
            this.httpSearch$ = fromEvent(this.input.nativeElement, 'keyup')
              .pipe(
                debounceTime(400),
                distinctUntilChanged(),
                tap(() => {
                  this.paginator.pageIndex = 0;
                  this.search({ searchText: this.input.nativeElement.value });
                })
              )
              .subscribe();

            // this.getNewRequests(this.isComplete); I COMMENTED OUT THIS LINE AFTER RESOLVING DATA
          }

          getNewRequests(type) {
            this.httpSub$ = this.paginator.page
              .pipe(
                startWith({}),
                switchMap(() => {
                  let params = {
                    offset: ((this.paginator.pageIndex + 1) * this.paginator.pageSize) - this.paginator.pageSize,
                    limit: this.paginator.pageSize,
                    newRequests: true,
                    isComplete: this.isComplete    //1 for complete , 0 for incomplete, for all : 2
                  };
                  this.isLoadingResults = true;
                  return this.service.postRequest(this.globals.urls.driver.getDrivers, params);
                }),
                map(res => {
                  return res.data;
                }),
              ).subscribe(
                data => {
                  this.isLoadingResults = false;
                  this.resultsLength = data.count;
                  this.dataSource = data.drivers;
                  this.totalRecords = data ? data.drivers.length : 0;
                },
                err => {
                  this.dataSource = [];
                  this.isLoadingResults = false;
                  // this.service.showError(err.error.message);
                }
              );
          }

          search(input) {
            this.isLoadingResults = true;
            const params = {
              searchText: input.searchText || null,
              newRequests: true,
              isComplete: this.isComplete
            };
            this.service.postRequest(this.globals.urls.driver.getDrivers, params)
              .pipe(
                map(res => {
                  return res.data;
                })
              )
              .subscribe(
                data => {
                  this.isLoadingResults = false;
                  this.resultsLength = data.count;
                  this.dataSource = data.drivers;
                  this.totalRecords = data ? data.drivers.length : 0;
                },
                err => {
                  this.dataSource = [];
                  this.isLoadingResults = false;
                  // this.service.showError(err.error.message);
                },


      )
      }

у меня тоже есть поле поиска, где я ищу ключевое слово и т. Д. Теперь, как я могу сделать работу разбивки на страницы?