使用 RouterLink 和 State 将对象从一个组件传递到另一个组件，子组件刷新后，它会丢失其类

Question

https://stackblitz.com/edit/stackblitz-starters-cdffrt

问题是在导航到人员详细信息组件后，如果刷新页面，

this.person

似乎不知道它是一个 Person 类，即使它被转换为一个 Person。您无法调用类上的方法，因为它不知道它们。

export class PersonDetailsComponent {
  person: Person | null = null;

  constructor(private readonly router: Router) {
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state != null) {
      this.person = navigation.extras.state['data'] as Person;
    }
  }
}

这是问题的一个示例。

重现问题的步骤：

1. 确保从家里开始

2. 单击“获取人员详细信息”链接

3. 看到它获取了人的名字和姓氏，并且能够调用类上的方法来显示全名。

4. 然后刷新浏览器，注意它抛出一个异常，指出 getFullName 未定义。

它已经被塑造为一个人，所以我不知道我还能做什么。感觉可能需要在角度路由器中配置一个标志或选项，但我显然不确定。

当您从家里导航到人员详细信息时，

this.person instanceof Person

返回 true。 刷新后，相同的代码块将返回 false。

Answer 1

我正在使用本地存储解决方案：

第1步：设置后将Person对象保存到本地存储。

localStorage.setItem('person', JSON.stringify(this.person));

第 2 步：在组件的构造函数中从本地存储加载并补充 Person 对象。

import { Component } from '@angular/core';
import { Person } from './person';

@Component({
  // write the component metadata here
})
export class PersonDetailsComponent {
  person: Person | null = null;

  constructor() {
    const personData = localStorage.getItem('person');
    if (personData) {
      this.person = Object.assign(new Person(), JSON.parse(personData));
    }
  }
}

也可以通过其他方法。