Angular Material 7 – Paginator

前言

Angular Material是一个官方的UI库，为开发者提供了丰富的组件，方便快捷地实现基于 Material Design 的界面。其中，Paginator组件可以实现分页效果，本文将介绍Paginator组件的使用。

安装

使用Angular CLI创建一个新项目后，在命令行中输入以下命令安装Angular Material:

ng add @angular/material

安装完成后，可以在项目中的 app.module.ts 中导入 MatPaginatorModule：

import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // ...
    MatPaginatorModule
  ]
})

实现 Paginator

实现Paginator很简单，只需要用MatPaginator组件包裹列表就可以了。下面演示如何使用MatPaginator组件。

HTML代码示例

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

<table mat-table [dataSource]="dataSource">
  <!-- ... -->
</table>

注意：Paginator的属性 length 是数据总数，pageSize 是每页显示的数据量，pageSizeOptions 是可以选择的每页数据量选项。

TypeScript 代码示例

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.81, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.011, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.007, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.999, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.998, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.180, symbol: 'Ne'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  ngOnInit() {
    // TODO Fetch data from server
  }
}

上述代码中，ELEMENT_DATA 是我们要显示的数据。在 ngOnInit() 中，我们应该从服务器或本地获取数据。dataSource 是 MatTableDataSource 类型的变量，它会将数据传递给表格组件。在组件的元数据（metadata）中，我们将 displayedColumns 数组定义为我们要展示的列。

改变样式

Paginator组件样式可以通过Angular Material的Theme来改变。在样式文件 styles.scss（或 styles.less 或 styles.css）中，定义 @import 语句以引入样式：

@import '@angular/material/theming';
@include mat-core();

my-primary-theme: (
  '50': #cccccc,
  '100': #b3b3b3,
  '200': #999999,
  '300': #808080,
  '400': #666666,
  '500': #4d4d4d,
  '600': #333333,
  '700': #1a1a1a,
  '800': #000000,
  '900': #000000,
  'A100': #cccccc,
'A200': #4d4d4d,
  'A400': #000000,
  'A700': #000000,
  'contrastDefaultColor': 'light',
  'contrastDarkColors': '50 100 A100'
);

@include angular-material-theme(my-primary-theme);

my-accent-theme: (
  '50': #ff057a,
  '100': #ff0370,
  '200': #ff0166,
  '300': #ff005c,
  '400': #ff004e,
  '500': #ff0040,
  '600': #ff0036,
  '700': #ff002c,
  '800': #ff0022,
  '900': #ff0018,
  'A100': #ff578e,
  'A200': #ff6e9b,
  'A400': #ff85a8,
  'A700': #ff91b1,
  'contrastDefaultColor': 'light',
  'contrastDarkColors': '50 100 A100'
);

@include angular-material-theme(my-accent-theme);

这里定义了两个主题，$my-primary-theme 和 $my-accent-theme。其中，my-accent-theme 是用于设置Paginator组件的颜色。在 mat-paginator 标签中添加 color 属性，可以将样式应用到 Paginator 组件上：

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

上述代码中的 accent 是颜色名称，它引用了 $my-accent-theme 中的颜色。

结论

Paginator组件可以帮助我们实现数据分页效果，使页面更加美观和易读。Angular Material提供了丰富的组件和样式，为前端开发提供了更多的便利。