在Angular 2中,可以使用localStorage
来存储值,并在值发生变化时刷新视图。下面是一个示例代码:
LocalStorageService
服务来操作本地存储:import { Injectable } from '@angular/core';
@Injectable()
export class LocalStorageService {
setItem(key: string, value: any) {
localStorage.setItem(key, JSON.stringify(value));
}
getItem(key: string) {
return JSON.parse(localStorage.getItem(key));
}
}
LocalStorageService
服务,并监听本地存储值的变化:import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from './local-storage.service';
@Component({
selector: 'app-root',
template: `
{{ value }}
`
})
export class AppComponent implements OnInit {
value: any;
constructor(private localStorageService: LocalStorageService) {}
ngOnInit() {
this.value = this.localStorageService.getItem('myValue');
// 监听本地存储值的变化
window.addEventListener('storage', (event) => {
if (event.key === 'myValue') {
this.value = JSON.parse(event.newValue);
}
});
}
// 更新本地存储值
updateValue(newValue: any) {
this.value = newValue;
this.localStorageService.setItem('myValue', newValue);
}
}
updateValue
方法来更新本地存储值:
当调用updateValue
方法更新本地存储值时,视图会自动刷新显示最新的值。同时,如果在其他地方修改了本地存储值,也会触发storage
事件,从而更新视图。