移除 Angular Material 响应式分页

Question

我可以删除仅在移动设备上使用 Angular material 生成的选项卡的分页吗？？

我正在开发 Angular 6 并使用 material 的最新版本。

谢谢！

Answer 1

您可以使用 CDK Layout 通过 Angular Material 断点内联检测屏幕尺寸，以有条件地设置 MatTableDataSource 分页器。此示例假设您想要设置 600 像素的移动 "breakpoint"，但您可以调整为您需要的任何像素宽度：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { tap } from 'rxjs/operators';    

@Component({
  selector: 'table-pagination-example',
  styleUrls: ['table-pagination-example.css'],
  templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;

  isLargeScreen: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit() {
    this.breakpointObserver.observe([
      '(min-width: 600px)'
    ]).pipe(
      tap(result => this.isLargeScreen = result.matches)
    ).subscribe(result => {
      if (result.matches) {
        this.dataSource.paginator = this.paginator;
      } else {
        this.dataSource.paginator = null;
      }
    });
  }
}

然后使用 ngStyle 有条件地设置 mat-paginator 样式。我们使用 ngStyle 而不是像 *ngIf 这样的东西，因为这可能会影响 ViewChild 找到 MatPaginator:

<mat-paginator [ngStyle]="{display: isLargeScreen ? 'block' : 'none'}" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

这是一个 example 演示仅在媒体为 Tablet 或 Web[= 时才激活相应 MatTableDataSource 的分页器32=].

希望对您有所帮助！

移除 Angular Material 响应式分页

Remove Angular Material pagination on responsive

angular-material

responsive

angular