Angular页面刷新时数据丢失问题求助

问题原因分析 #

刷新页面时组件重新初始化，以下问题导致数据消失：

• ngOnDestroy中调用ngOnInit完全无效，组件销毁阶段执行初始化逻辑毫无意义，还可能引发异常
• 异步请求返回前，quizcount和Published未设置初始值，页面渲染时显示空值
• 直接操作DOM的方式不符合Angular规范，可能导致数据同步问题
• 未严格校验sessionStorage中Td字段的存在性，若刷新后该字段丢失，请求参数无效导致后端返回空数据

解决方案 #

1. 移除错误的ngOnDestroy逻辑 #

删掉ngOnDestroy中的无效调用：

ngOnDestroy(){
  // 移除this.ngOnInit();
}

2. 给数量变量设置初始值 #

在组件类中给quizcount和Published设置初始值，避免异步请求返回前页面显示空：

export class HomePage implements OnInit, OnDestroy {
  teachername;
  quizcount = 0; // 添加初始值
  Published = 0; // 添加初始值
  // ... 其他代码
}

3. 校验sessionStorage中的关键字段 #

在ngOnInit中增加Td的校验，确保请求参数有效：

ngOnInit() {
  this.teachername = sessionStorage.getItem('teachername');
  const teacherId = sessionStorage.getItem("Td");
  if (!this.teachername || !teacherId) {
    this.logout();
    return;
  }
  // 后续请求代码保持不变
}

4. 替换DOM操作为Angular数据绑定 #

修改home.html，用Angular数据绑定替代直接DOM操作：

<!-- 原btnGroupDrop1元素改为数据绑定 -->
<div id="btnGroupDrop1">{{teachername}}</div>

<!-- 数量显示部分保留 -->
<div class="card-footer" style="background: #fff;">
  <div class="stats">
    Total assignment&nbsp;:&nbsp;{{quizcount}}
  </div>
</div>

5. 确保登录时正确存入sessionStorage #

检查登录逻辑，确保登录成功后将teachername和Td正确存入sessionStorage，示例：

// 登录成功后执行
sessionStorage.setItem('teachername', '老师姓名');
sessionStorage.setItem('Td', '老师ID');

内容的提问来源于stack exchange，提问作者Mohammed Hannan Baig