Question

我想将pageSize保存并恢复到localStorage中。首先，根据我的想法，我创建了一个指令。它部分起作用:)我可以保存pageSize。但是如何阅读？

请，强大的所有人，提示我！

import { Directive, ElementRef, OnDestroy, HostListener, HostBinding } from 

'@angular/core';
import { UserClientOptionsService } from 'app/user-client-options.service';

@Directive({
  selector: '[itemsPerPage]'
})
export class ItemsPerPageDirective implements OnDestroy {

  constructor(private element: ElementRef, private optionsService: UserClientOptionsService) {
  }

  // it doesn't work. No property pageSize exists
  //@HostBinding('pageSize')
  //pageSize: number;

  @HostListener('page', ['$event'])
  onChange(e) {
    this.optionsService.update(x => x.itemsPerPage = e.pageSize);
  }

  ngOnDestroy() {
  }
}

和HTML

<mat-paginator [length]="src" pageSize="10" itemsPerPage [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

Answer 1

由于您未提供UserClientOptionsService的代码，因此我假定您需要从本地存储中检索分页器值时需要帮助，因此我假设您能够正确存储和检索该值来自localStorage。

基于上述假设，我在所附的堆栈闪电战中提供了用于设置分页器值的组件和指令方法。

我建议不要使用通用的ElementRef，而应使用MatPaginator类的引用。

private element: MatPaginator

使用此参考，您可以预订该类的本机事件发射器，而无需为此使用@HostListener。

element.page.subscribe()

当用户更改它时，我正在使用该订阅在本地变量CurrentPageSize中设置值...只需将this.optionsService.update(e.pageSize)逻辑添加到订阅中。

请注意：，您仍然需要将该值设置为本地变量，因为这是将localStorage值传递给分页器。

public CurrentPageSize: number = 5;

element.page.subscribe((e) => this.SetPageSizeVariable(e.pageSize));

constructor(
    private element: MatPaginator,
    // private optionsService: UserClientOptionsService
  ) {
    element.page.subscribe((e) => this.SetPageSizeVariable(e.pageSize));
  }

    public SetPageSizeVariable(v = null) {
        if (v)
          this.CurrentPageSize = v;
        else
          this.CurrentPageSize = this.element.pageSize;
      }

要将值传递到分页器中，请执行以下操作

将您的指令导出为itemsPerPage

@Directive({
  selector: '[itemsPerPage]',
  exportAs: 'itemsPerPage'
})

然后在您的视图中，将模板引用设置为导出#itemsDir="itemsPerPage"，并将您的公共变量CurrentPageSize传递到[pageSize]的{{1}}输入中。

mat-paginator

修订

为避免在Directive解决方案中使用html中的input属性，每次<mat-paginator itemsPerPage #itemsDir="itemsPerPage" [pageSize]="itemsDir.CurrentPageSize" [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>时都需要调用pageSize setter。

this.element.pageSize = v

我已经删除了组件解决方案，并从stackblitz的Directive版本中删除了所有html组件代码。

Stackblitz

https://stackblitz.com/edit/angular-o7eeku?embed=1&file=directive/ItemsPerPageDirective.ts

Answer 2

受@Marshal的代码的启发，我试图自己创建一个持久的pageSize。

我创建了一个新指令mPaginationItemsPerPage：

import { Directive, OnInit } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material';

const PAGE_SIZE_KEY = 'pagination_page_size';

@Directive({
    selector: '[mPaginationItemsPerPage]'
})
export class PaginationItemsPerPageDirective implements OnInit {
    private element: MatPaginator;

    get pageSize() {
        return parseInt(localStorage.getItem(PAGE_SIZE_KEY), 10);
    }

    set pageSize(size: number) {
        localStorage.setItem(PAGE_SIZE_KEY, '' + size);
    }

    constructor(private el: MatPaginator) {
        this.element = el;
    }

    ngOnInit(): void {
        this.element.pageSize = this.pageSize;

        this.element.page.subscribe((page: PageEvent) => {
            this.pageSize = page.pageSize;
        });
    }
}

您要做的就是向mat-paginator元素添加指令属性：

<mat-paginator mPaginationItemsPerPage [length]="count" [hidePageSize]="false" [pageSize]="10" [pageSizeOptions]="[10,25,50,100]"></mat-paginator>

角度材料保存并将pageSize恢复到localStorage

2 个答案: