Удалить угловой материал нумерации на отзывчивый

Question

Могу ли я удалить нумерацию вкладок, созданных с использованием материала Angular, только на мобильном телефоне?

Я работаю над Angular 6 и использую последнюю версию материала.

Thx!

Answer 1

Вы можете использовать Компоновка CDK для определения размеров экрана в соответствии с контрольными точками углового материала, чтобы условно установить пагинатор MatTableDataSource. В этом примере предполагается, что вы хотите установить мобильную «точку останова» в 600 пикселей, но вы можете настроить ее на любую необходимую ширину в пикселях:

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>

Вот пример , демонстрирующий активацию пагинатора только для соответствующего MatTableDataSource только при использовании носителя Планшет или Веб .

Надеюсь, это поможет!