如图所示，我如何设置 mat paginator angular 样式答案

【问题标题】：How can i style mat paginator angular as shown如图所示，我如何设置 mat paginator angular 样式
【发布时间】：2022-02-03 04:22:37
【问题描述】：

我有一个角垫分页器的 figma 设计。我如何设置角垫分页器的样式，如 figma 中所示？

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： angular angular-material pagination

【解决方案1】：

要创建带有省略号的分页按钮，我们可以在互联网上寻找必要的算法。我不想重新发明轮子，但是，遗憾的是我找不到我喜欢的一个“分页器”（大多数是添加省略号，我不能总是得到相同数量的元素（按钮和省略号）。所以，如果我们有“getNumberOfPages（总页数）”、“countPages”（按钮数）、“pageIndex”（实际页面 -0 是第一个，1 是第二个......）我们可以返回一个字符串数组使用函数：

createButtonsPage() {
    const last = this.getNumberOfPages() - 1;
    const b = new Array(
      last < this.countPages ? last + 1 : this.countPages
    ).fill('.');

    if (last < this.countPages) return b.map((_x, i) => '' + i);

    const links0_5 = (this.countPages - 1) / 2;
    let start = this.pageIndex - links0_5 < 0 ? 0 : 
                this.pageIndex - links0_5;
    let end =start == 0? this.countPages - 1:
             this.pageIndex + links0_5 > last ? last:
             this.pageIndex + links0_5;

    if (end == last) start = end - this.countPages + 1;

    return b.map((_x, i) => {
      return i == 0 ? '0':
             i == this.countPages - 1? '' + last:
             (i == 1 && start) || (i == this.countPages - 2 && end != last)? '...':
             '' + (i + start);
    });
  }

我们可以通过fromEvent的方式根据屏幕大小选择显示按钮

   fromEvent(window, 'resize')
        .pipe(
          startWith({ target: { innerWidth: window.innerWidth } }),
          debounceTime(200),
          distinctUntilChanged(),
          takeUntil(this.active),
          map((e: any) => {
            const countPage =
              e.target.innerWidth > 620 ? (e.target.innerWidth > 750 ? 9 : 7) : 5;
            return this.countPage
              ? countPage < this.countPage
                ? countPage
                : this.countPage
              : countPage;
          })
        )
        .subscribe((x: number) => {
          this.countPages = this.countPagesOld = x;
          this._buttons = this.createButtonsPage();
        });

在我们的分页器中，我们可以对按钮使用 getter。由于我们不想“重新计算按钮”，我们可以将旧值存储在变量中，有些像

  get buttons() {
    if (
      !this._buttons ||
      this.pageIndexOld != this.pageIndex ||
      this.countPagesOld != this.countPages ||
      this.pageSizeOld != this.pageSize ||
      this.lengthOld != this.length
    ) {
      this._buttons = this.createButtonsPage();
      this.pageIndexOld = this.pageIndex;
      this.countPagesOld = this.countPages;
      this.pageSizeOld = this.pageSize;
      const last = this.getNumberOfPages();
      if (last && +this.control.value > last)
        this.control.setValue(last, { emitEvent: false });
    }
    return this._buttons;
  }

好吧，我做了一个new stackblitz。在stackblitz中你也可以

为“上一个”和“下一个”按钮赋予价值
选择 justify-content - 分页器是 div 中的包装器弹性-
更改按钮的颜色 - 为此我使用了一个 CSS 变量，例如在this article 中显示 Netanet 基础（参见 table-filtering-example.css）

【讨论】：

【解决方案2】：

您可以创建一个从 _MatPaginatorBase 扩展的自定义分页器组件

  export class CustomPaginatorComponent extends
                  _MatPaginatorBase<MatPaginatorDefaultOptions>  {

  constructor(
    intl: MatPaginatorIntl,
    changeDetectorRef: ChangeDetectorRef,
    @Optional() @Inject(MAT_PAGINATOR_DEFAULT_OPTIONS) defaults?:
                                  MatPaginatorDefaultOptions,
  ) {
    super(intl, changeDetectorRef, defaults);
    }

到下一页/上一页只需致电previousPage()和nextPage()

  <button (click)="previousPage()">prev</button>
    custom-paginator works!
  <button (click)="nextPage()">next</button>

要转到需要创建函数的页面

  emitPageEvent(nextPage:any)
  {
    this.pageIndex=+nextPage
    this.page.emit({
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      length: this.length,
    });  
  }
}

您可以使用简单的输入

<input [ngModel]="pageIndex" 
       (ngModelChange)="emitPageEvent($event)">

看到你拥有MatPaginatorBase的所有属性和方法，最重要的：

Properties:
  pageIndex      : {{pageIndex}}
  length         : {{length}}
  pageSize       : {{pageSize}}
  pageSizeOptions: [{{pageSizeOptions}}]

Functions:
  hasPreviousPage() :{{ hasPreviousPage()}}
  hasNextPage()     :{{hasNextPage()}}

  previousPage()
  nextPage()
  firstPage()
  lastPage()

查看stackblitz

【讨论】：