面试题：Angular路由参数传递复杂对象及获取处理

路由参数传递：

在源组件中，假设使用Router服务进行导航。首先，将复杂对象进行序列化（例如使用JSON.stringify）。
示例代码如下：

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

@Component({
  selector: 'app - source - component',
  templateUrl: './source - component.html'
})
export class SourceComponent {
  user = {
    name: 'John Doe',
    age: 30,
    address: '123 Main St'
  };

  constructor(private router: Router) {}

  navigateToTarget() {
    const serializedUser = JSON.stringify(this.user);
    this.router.navigate(['/target - component', serializedUser]);
  }
}

在app - routing.module.ts中配置路由，确保目标路由路径正确定义：

const routes: Routes = [
  { path: 'target - component/:user', component: TargetComponent }
];

目标组件获取和处理：

在目标组件中，通过ActivatedRoute来获取路由参数，并进行反序列化（使用JSON.parse）。
示例代码如下：

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

@Component({
  selector: 'app - target - component',
  templateUrl: './target - component.html'
})
export class TargetComponent {
  user: any;

  constructor(private route: ActivatedRoute) {
    this.route.paramMap.subscribe(params => {
      const serializedUser = params.get('user');
      if (serializedUser) {
        try {
          this.user = JSON.parse(serializedUser);
        } catch (error) {
          console.error('Error parsing user object:', error);
        }
      }
    });
  }
}

数据安全性和稳定性：
- 数据安全性：
  - 在序列化和反序列化过程中，要进行错误处理。如上述代码中，在反序列化时捕获JSON.parse可能抛出的错误，避免应用崩溃。
  - 对传递的数据进行验证，确保数据格式符合预期。例如，在目标组件获取到对象后，检查对象的属性是否存在且类型正确。
- 数据稳定性：
  - 避免传递敏感信息在路由参数中，因为路由参数会显示在URL中，不安全。
  - 尽量保持传递对象的结构简单和稳定，避免频繁改变对象结构，以防止在序列化和反序列化过程中出现兼容性问题。

面试题：Angular路由参数传递复杂对象及获取处理

知识考点

面试题答案