Question

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

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

我不知道为什么但[扩展]多次运行..

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作为[已扩展]标记，则可以使用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中。如果value不在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

使用角度为4的LocalForage

2 个答案: