angular - 编写通用逻辑以从 API 获取表格排序和分页首选项并相应地显示数据 angular 4

Question

我正在尝试在材料设计表上编写自定义逻辑。我想在哪里保存matSortActive、matSortDirection之类的首选项，当用户下次访问同一个组件时，他可以根据他保存的首选项查看表格。为此，我将首选项保存在本地存储中，然后检索它并显示数据。

我想编写一个自定义指令，它可以读取本地存储并直接应用这些设置。无需在组件或任何服务中编写相同的代码以实现可重用性。

我的指令是

import { Directive, ElementRef, Input, HostListener, OnInit } from '@angular/core';
import { LocalStorageService } from '../services/local-storage.service';

@Directive({
  selector: '[savePrefrences]'
})
export class SavePrefrencesDirective implements OnInit{
  @Input() set savePrefrences(prefrencesEvent) {
    prefrencesEvent.subscribe((prefr) => {
    if(!prefr || !prefr.component ||
      !prefr.event){
        return;
    }
    let savePref = {
      event: prefr.event,
      pageSize: prefr.pageSize,
      filter: prefr.filters
    }
    let pref = {};
    let currentPref = this.getPreferencesObject();
    if(currentPref){ //[prefr.component]
      let prefParse = currentPref;
      if(prefParse[prefr.component]){
        prefParse[prefr.component] = savePref;
        pref = prefParse;
      }
    } else {
      pref[prefr.component] = savePref;
    }
    this.setPreferencesObject(pref);
    });
  }
  getPreferencesObject() {
    let currentPref = this.localStorageService.getKey('preferences');
    if(currentPref){
      return JSON.parse(currentPref);
    }
    return null;
  }
  setPreferencesObject(prefObject: any){
    console.log('setting prefrences object' + prefObject);
    this.localStorageService.setKey('preferences', JSON.stringify(prefObject));
  }
}

对应的html代码是

<mat-table #table [dataSource]="dataSource" matSort [savePrefrences]='sortEvent' matSortDirection='{{sortPref.direction}}' matSortActive='{{sortPref.name}}' (matSortChange)="sortChange($event)"></mat-table>

这里的 savePrefences 指令将 sortEvent 作为事件发射器，它将所有首选项保存为一个对象。如代码所示。

目前我正在提供来自组件的matSortDirection和matSortActive值。

标签： angularangular-materialangular-material2angular2-directivesangular-directive