使用 Angular 4 的 LocalForage答案

【问题标题】：Using LocalForage with angular 4使用 Angular 4 的 LocalForage
【发布时间】：2017-08-01 15:50:02
【问题描述】：

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

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

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

html

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

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

【问题讨论】：

标签： angular local-storage angular-material2 localforage

【解决方案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

【讨论】：

【解决方案2】：

这不是最优雅的解决方案，但确实可以。通过使用ChangeDetectionStrategy.OnPush，我可以获得我想要的结果.. 但我可能会在以后重新设计它，除此之外，我会将解决方案更新为@Nehal 所写的类似方法。

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

【讨论】：