角度材料保存和恢復pageSize到localStorage

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

我假設您在從localStorage檢索后設置paginator值時需要幫助，因為您沒有為UserClientOptionsService提供代碼，所以我假設您能夠從localStorage正確存儲和檢索值。

基於上述假設，我在附加的stackblitz中提供了一個組件和指令方法，用於設置paginator值。

---

我建議不要使用通用的ElementRef而是獲取MatPaginator類的引用。

private element: MatPaginator

使用此引用，您可以訂閱該類的本機事件發射器，而不是使用@HostListener 。

element.page.subscribe()

我正在使用該訂閱在用戶更改它時在本地變量CurrentPageSize設置值...只需將this.optionsService.update(e.pageSize)邏輯添加到訂閱。

• 請注意：您仍然需要將值設置為局部變量，因為這是將localStorage值傳遞給paginator的方式。

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

---

要將值傳遞到paginator，請執行以下操作

將您的指令導出為itemsPerPage

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

然后在您的視圖中，將模板引用設置為export #itemsDir="itemsPerPage" ，並將公共變量CurrentPageSize傳遞給mat-paginator上的[pageSize]輸入。

<mat-paginator itemsPerPage #itemsDir="itemsPerPage" [pageSize]="itemsDir.CurrentPageSize" [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

---

調整

為避免在指令解決方案的html中使用input屬性，每次this.element.pageSize = v時都需要調用pageSize setter。

 private _setPageSize(v) {
    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>