Question

我可以删除仅在移动设备上由Angular材质生成的选项卡的分页吗？

我正在使用Angular 6并使用最新版本的材料。

谢谢！

Answer 1

您可以使用CDK Layout检测与Angular Material断点内联的屏幕尺寸，以有条件地设置MatTableDataSource分页器。此示例假定您要设置600px的移动“断点”，但是您可以调整为所需的任何px宽度：

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;
      }
    });
  }
}

然后使用mat-paginator有条件地设置ngStyle的样式。我们使用ngStyle代替类似*ngIf之类的东西，因为这可能会导致ViewChild找到MatPaginator：

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

这里是example，仅在媒体为平板电脑或网络时，才演示为各个MatTableDataSource激活分页器。

希望有帮助！

消除响应时的Angular Material分页

1 个答案: