在Angular 9中重新加载页面后保持复选框的状态,可以通过以下步骤实现:
[(ngModel)]
,并设置一个唯一的标识符。<input type="checkbox" [(ngModel)]="isChecked" id="checkbox1">
isChecked: boolean = false;
ngOnInit
生命周期钩子函数中,通过读取本地存储或其他持久化方式,获取之前保存的复选框状态,并将其赋值给变量。ngOnInit() {
const savedState = localStorage.getItem('checkboxState');
if (savedState) {
this.isChecked = JSON.parse(savedState);
}
}
ngOnDestroy
生命周期钩子函数中,将当前复选框的状态保存到本地存储或其他持久化方式中。ngOnDestroy() {
localStorage.setItem('checkboxState', JSON.stringify(this.isChecked));
}
这样,当页面重新加载时,Angular会自动将保存的状态赋值给复选框,从而保持复选框的状态不变。
需要注意的是,以上方法只适用于单个复选框的情况。如果页面中存在多个复选框,可以使用类似的方法为每个复选框设置唯一的标识符,并分别保存和读取它们的状态。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云