使用RouterLink和State传对象后，刷新子组件丢失类实例问题

问题描述 #

在Angular里用RouterLink结合State向PersonDetailsComponent传递Person类对象时，首次跳转后能正常读取属性、调用getFullName方法；但刷新页面后，即便将navigation.extras.state['data']断言为Person类型，this.person也不再是Person类的实例，instanceof检查返回false，调用getFullName会抛出“未定义”异常。

复现步骤 #

• 从首页进入应用
• 点击“Get Person Details”链接
• 页面正常显示姓名，getFullName方法调用成功
• 刷新浏览器，触发getFullName未定义的异常

相关代码 #

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;
    }
  }
}

问题根源 #

路由状态（navigation state）在浏览器刷新时会被序列化为JSON格式存储，而JSON序列化仅保留对象的原始属性值，不会保存类的原型链及原型上的方法。刷新后从state中取出的只是普通JS对象，而非Person类的实例，因此无法调用原型上的getFullName方法。

解决方案 #

方案1：手动重新实例化Person类

拿到state中的普通对象后，用其属性创建新的Person实例，恢复原型链与方法。

修改PersonDetailsComponent代码：

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

  constructor(private readonly router: Router) {
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state != null) {
      const personData = navigation.extras.state['data'];
      // 用取出的属性数据创建Person实例
      this.person = new Person(personData.firstName, personData.lastName);
    }
  }
}

若想支持直接传入对象初始化，可给Person类添加重载构造函数：

export class Person {
  public firstName: string;
  public lastName: string;

  // 支持两种构造方式
  constructor(firstName: string, lastName: string);
  constructor(data: { firstName: string; lastName: string });
  constructor(arg1: string | { firstName: string; lastName: string }, arg2?: string) {
    if (typeof arg1 === 'object') {
      this.firstName = arg1.firstName;
      this.lastName = arg1.lastName;
    } else {
      this.firstName = arg1;
      this.lastName = arg2!;
    }
  }

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

此时组件中可简化为：

this.person = new Person(personData);

方案2：给Person类添加静态方法重构实例

在Person类中编写静态方法，专门用于从JSON对象恢复实例，代码更规整：

export class Person {
  constructor(public firstName: string, public lastName: string) {}

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  // 静态方法：从普通对象生成Person实例
  static fromJSON(data: { firstName: string; lastName: string }): Person {
    return new Person(data.firstName, data.lastName);
  }
}

组件中调用该方法：

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

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

方案3：用Angular服务存储状态（适合复杂场景）

若传递的对象结构复杂，或需在多组件间共享，可改用全局服务存储实例，而非依赖路由state：

1. 创建PersonService：

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

@Injectable({ providedIn: 'root' })
export class PersonService {
  private currentPerson: Person | null = null;

  setPerson(person: Person): void {
    this.currentPerson = person;
  }

  getPerson(): Person | null {
    return this.currentPerson;
  }
}

2. 跳转前的组件中设置服务数据：

// 首页组件示例
export class HomeComponent {
  constructor(private personService: PersonService, private router: Router) {}

  goToDetails(): void {
    const person = new Person('John', 'Doe');
    this.personService.setPerson(person);
    this.router.navigate(['/person-details']);
  }
}

3. PersonDetailsComponent从服务读取数据：

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

  constructor(private personService: PersonService) {
    this.person = this.personService.getPerson();
  }
}

注意：若用户直接输入详情路由地址访问，服务中无数据，需额外处理该边界情况。

内容的提问来源于stack exchange，提问作者Zachary Richardson