使用 LocalForage angular 4

Question

我有一个可以切换的项目列表（使用 angular material2），当 opened/closed 我想在本地存储中保存状态。

http://plnkr.co/edit/ckk4BCkNYNgNzJodW53t?p=preview

我不知道为什么 [expanded] 运行了多次..

html

<md-expansion-panel class="panel"  (opened)="openPanel('a3')" (closed)="closePanel('a3')">

js

shouldBeExpanded(name: string) {
   let item = localStorage.getItem(name);
   return item;
}

Answer 1

问题是您正在使用 [expanded] 进行函数绑定。因此，每次运行更改检测时，它都会一次又一次地检查 shouldBeExpanded 函数。

选项 1：

如果您想继续使用 shouldBeExpanded 作为 [expanded] 标志，您可以使用 OnPush 更改检测策略。

当我测试这个时，展开和折叠有点小故障。在演示中试用

ts:

import {Component, ChangeDetectionStrategy} from '@angular/core';
import {Http} from '@angular/http'
import {bootstrap} from '@angular/platform-browser-dynamic';

import 'rxjs/add/operator/map'

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

Plunker demo

选项 2：

您可以创建一个数组来跟踪每个扩展的标志，而不是与函数绑定。您可以使用 OnInit 和存储在 localstorage 中的值来初始化数组。如果值不在本地存储中，您可以分配一个默认标志。每当扩展状态发生变化时，在数组中更新它并 localstorage.

ts:

export class AppComponent implements OnInt {

  private version: any;

  items = ["a1", "a2", "a3"];
  expansionFlag = [];

  constructor(http: Http) {
    // Display the currently used Material 2 version.
    this.version = http
      .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD')
      .map(res => res.json())
  }

  ngOnInit(){
    for(let i = 0; i <this.items.length; i++){
      let flag = JSON.parse(localStorage.getItem(this.items[i]));
      console.log(flag);
      if(flag != undefined && flag != null){
        this.expansionFlag.push(flag);
      }
      else
        this.expansionFlag.push(false);
    }

    console.log(this.expansionFlag)
  }
  openPanel(name, index) {
    console.log(name, 'is now open')
    this.expansionFlag[index] = true;
    localStorage.setItem(name, 'true');
  }
  closePanel(name, index) {
    console.log(name, 'is now closed');
    this.expansionFlag[index] = false;
    localStorage.setItem(name, 'false');
  }

}

更新 html 中的每个 [expanded]：

[expanded]="expansionFlag[0]"
[expanded]="expansionFlag[1]"
[expanded]="expansionFlag[2]"

Plunker demo

Answer 2

这不是最优雅的解决方案，但它可以完成工作。通过使用 ChangeDetectionStrategy.OnPush 我可以获得我想要的结果..但我可能会在稍后重新处理这个，除其他外，我会将解决方案更新为与@Nehal 所写的类似方法。

http://plnkr.co/edit/Q3daXShLOilqhUA4J7eo?p=preview

使用 LocalForage angular 4

Using LocalForage with angular 4

local-storage

localforage

angular-material2

angular