Angular组件间通过Service传数据，页面刷新后数据变undefined怎么办？

页面刷新时，Angular应用会完全重启，Service中的内存变量会被重新初始化，导致之前存储的data值丢失，变成undefined。以下是两种可行的解决方法：

方法一：用localStorage/sessionStorage持久化数据 #

将数据存储到浏览器本地存储中，避免页面刷新后数据丢失。修改你的SendService如下：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class SendService {
  constructor(private router: Router) { }

  private readonly STORAGE_KEY = 'transfer_data';

  setData(data: number) {
    // localStorage仅支持字符串存储，需将数字转换
    localStorage.setItem(this.STORAGE_KEY, data.toString());
  }

  getData(): number {
    const storedData = localStorage.getItem(this.STORAGE_KEY);
    // 读取时转回数字，无数据则返回0
    const temp = storedData ? parseInt(storedData, 10) : 0;
    this.clearData();
    console.log('result is ', temp);
    return temp;
  }

  clearData() {
    localStorage.removeItem(this.STORAGE_KEY);
  }
}

• 若希望关闭浏览器后自动清除数据，可将localStorage替换为sessionStorage
• 存储和读取时注意类型转换，避免字符串与数字的类型问题

方法二：通过路由参数传递数据 #

如果数据不需要长期保存，可在导航时通过路由参数传递，页面刷新后参数依然保留：

发送组件修改导航逻辑 #

sender(data: number) {
  this.router.navigate(['/目标路由'], { queryParams: { data: data } });
}

接收组件读取路由参数 #

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.data = params['data'] ? parseInt(params['data'], 10) : 0;
  });
}

注意：这种方式数据会暴露在URL中，不适合传递敏感信息。

内容的提问来源于stack exchange，提问作者Majid Maddah