问题是你正在做功能绑定与[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
中。如果值不在本地存储中,则可以分配默认标志。每当扩展状态发生变化时,都要在数组中更新并且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