我有一个可以切换的项目列表（使用角度材料2），当打开/关闭时，我想将状态保存在本地存储中。
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;
}
问题是您正在与[expanded]. 因此，每次更改检测运行时，它都会shouldBeExpanded一次又一次地检查该功能。
选项1：
如果您想继续使用shouldBeExpandedfor [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
})
选项 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');
}
}
更新[expanded]html中的每个：
[expanded]="expansionFlag[0]"
[expanded]="expansionFlag[1]"
[expanded]="expansionFlag[2]"
这不是最优雅的解决方案，但它可以完成工作。通过使用ChangeDetectionStrategy.OnPush，我可以获得我想要的结果.. 但我可能会在以后重新工作，除此之外，我会将解决方案更新为与@Nehal 所写类似的方法。