угловое сохранение материала и восстановление страницыРазмер в localStorage

Question

Я хотел бы сохранить и восстановить размер страницы в localStorage.Во-первых, на мой взгляд, я создал директиву.Это работает частично :) Я могу сохранить размер страницы.Но как это прочитать?

Пожалуйста, всемогущий, подскажите мне!

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

Вдохновленный кодом @ Marshal, я попытался создать постоянную страницу. Размер.

Я создал новую директиву 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>

Answer 2

Я полагаю, что вам нужна помощь с настройкой значения paginator после извлечения его из localStorage, так как вы не предоставили код для UserClientOptionsService, поэтому я предполагаю, что вы можете правильно сохранить и извлечь значение из localStorage.

Исходя из вышеизложенного предположения, я предоставил компонентный и директивный подход в прилагаемом стековом блике для установки значения paginator.

---

Я рекомендую не использовать универсальный ElementRefно возьмите ссылку на класс MatPaginator.

private element: MatPaginator

С помощью этой ссылки вы можете подписаться на собственный источник событий этого класса и не использовать для этого @HostListener.

element.page.subscribe()

Я использую эту подписку, чтобы установить значение в локальной переменной CurrentPageSize, когда пользователь изменяет ее ... просто добавьте свою this.optionsService.update(e.pageSize) логику в подписку.

• Обратите внимание: вам все еще нужно установить значение в локальную переменную, так как вы будете передавать значение localStorage в pagin.ator.

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

Затем, по вашему мнению, установите шаблон ref в качестве экспорта #itemsDir="itemsPerPage" и передайте вашу открытую переменную CurrentPageSize во вход [pageSize] на mat-paginator.

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

---

Редакция

Чтобы избежать использования атрибута input в html для решения Директивы, вам нужно будет вызывать установщик pageSize каждый раз this.element.pageSize = v.

 private _setPageSize(v) {
    this.element.pageSize = v;
  }

Я удалил компонентное решение и удалил весь html-код компонента из версии Директивы в стеке бликов.

Стек стек бликов

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