分页组件：

import { ViewChild,Component,Inject,OnInit,AfterViewInit } from '@angular/core';
import { EntityJson } from './entity.json';
import { EntityService } from './entity.service';
import { MatPaginator,MatSort,MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { of as observableOf } from 'rxjs/observable/of';
import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
import { switchMap } from 'rxjs/operators/switchMap';

@Component({
    selector: 'entity-latest-page',providers: [EntityService],styles: [`
        :host mat-table {
           display: flex;
           flex-direction: column;
           min-width: 100px;
           max-width: 800px;
           margin: 0 auto;
        }
    `],template:
    `<mat-card>
        <mat-card-title>Entity List 
        <button mat-button [routerLink]="['/create/entity']">
            CREATE
        </button>
        </mat-card-title>
        <mat-card-content>
            <mat-table #table matSort [dataSource]="entitiesDataSource" matSort class="mat-elevation-z2">
                <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
                    <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
                </ng-container>
                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef  mat-sort-header> Name </mat-header-cell>
                    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
                </ng-container>
                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>
        </mat-card-content>
        <mat-card-content>
            <mat-paginator #paginator [length]="resultsLength"
                [pageSize]="5"
                [pageSizeOptions]="[5,20]">
            </mat-paginator>
        </mat-card-content>
    </mat-card>
    `
})
export class EntityLatestPageComponent implements AfterViewInit {

    private entities: EntityJson[];
    private entitiesDataSource: MatTableDataSource<EntityJson> = new MatTableDataSource();
    private displayedColumns = ['id','name'];

    resultsLength = 0;
    isLoadingResults = false;
    isRateLimitReached = false;

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    public constructor( @Inject(EntityService) private entityService: EntityService) {
    }

    public ngAfterViewInit() {

        // If the user changes the sort order,reset back to the first page.
        this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
        merge(this.sort.sortChange,this.paginator.page)
        .pipe(
            startWith({}),switchMap(() => {
            this.isLoadingResults = true;
            return this.entityService.fetchLatest(this.sort.active,this.sort.direction,this.paginator.pageIndex + 1,this.paginator.pageSize,(total) =>  this.resultsLength = total);
            }),map(data => {
            this.isLoadingResults = false;
            this.isRateLimitReached = false;
            //alternatively to response headers;
            //this.resultsLength = data.total;
            return data;
            }),catchError(() => {
            this.isLoadingResults = false;
            this.isRateLimitReached = true;
            return observableOf([]);
            })
        ).subscribe(data => this.entitiesDataSource.data = data);
    } 
}

服务：

import { EntityJson } from './entity.json';
import { ApiHelper } from '../common/api.helper';
import { Http,Headers,Response,RequestOptions } from '@angular/http';
import { Inject,Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AuthenticationService } from '../auth/authentication.service';
import { stringify } from 'query-string';

@Injectable()
export class EntityService {

    private options: RequestOptions;
    private apiPrefix: string;
    private apiEndpoint: string;

    constructor(
        @Inject(Http) private http: Http,@Inject(AuthenticationService) private authService: AuthenticationService) {

        this.options = authService.prepareRequestHeaders();
        this.apiPrefix = 'http://localhost:4200/api/v1/';
        this.apiEndpoint = this.apiPrefix + 'entities';
    }

    public fetchLatest(sort: string = '',order: string = '',page: number = 1,perPage: number = 5,initTotal: Function = () => {}): Observable<EntityJson[]> {
        return this.http.get(this.apiEndpoint +'?' + EntityService.createUrlQuery({sort: {field: sort,order: order},pagination: { page,perPage }}),this.options)
            .map((res) => {
                const total = res.headers.get('x-total-count').split('/').pop();
                initTotal(total);
                return JSON.parse(res.text()).content
            });
    }

    //should be put in a util
    static createUrlQuery(params: any) {
        if (!params) {
            return "";
        }

        let page;
        let perPage;
        let field;
        let order;
        let query: any = {};
        if (params.pagination) {
             page = params.pagination.page;
             perPage =  params.pagination.perPage;
             query.range = JSON.stringify([
                page,perPage,]);
        }
        if (params.sort) {
            field = params.sort.field;
            order = params.sort.order;
            if (field && order) {
                query.sort = JSON.stringify([field,order]);
            }
            else {
                query.sort = JSON.stringify(['id','ASC']);
            }
        }
        if (!params.filter) {
            params.filter = {};
        }
        if (Array.isArray(params.ids)) {
            params.filter.id = params.ids;
        }

        if (params.filter) {
            query.filter = JSON.stringify(params.filter)
        }
        console.log(query,stringify(query));
        return stringify(query);
    }
}

Spring Boot Rest控制器端点

@GetMapping("entities")
public Iterable<Entity> filterBy(
        @RequestParam(required = false,name = "filter") String filterStr,@RequestParam(required = false,name = "range") String rangeStr,name="sort") String sortStr) {
    //my own helpers - for source: https://github.com/zifnab87/react-admin-java-rest
    //FilterWrapper wrapper = filterService.extractFilterWrapper(filterStr,rangeStr,sortStr);
    //return filterService.filterBy(wrapper,repo);
}

一些说明：

>确保导入模块：MatTableModule,MatPaginatorModule和MatSortModule以及Material Design的其他模块.>我决定从Response-Header x-total-count填充resultsLength(total),我通过Spring Boot @ControllerAdvice填充它.或者,您可以从EntityService返回的对象(例如,Spring for Spring)获取此信息,但这意味着如果您想要“生成”,则需要使用any作为返回类型或为项目中的所有实体声明包装类对象.类型安全”.