面试题：Angular懒加载中的路由参数传递与处理

传递路由参数

在主模块导航时传递参数：在主模块的路由导航代码中，通过 router.navigate 方法传递参数。例如，假设主模块中有一个按钮点击触发导航到懒加载模块的 DetailComponent 组件，并传递 id 参数：

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  constructor(private router: Router) {}

  goToDetail() {
    const id = 1;
    this.router.navigate(['/lazy/detail', id]);
  }
}

这里使用了动态路由的方式，/lazy/detail/:id 中的 :id 表示动态参数部分。

配置懒加载模块的路由：在懒加载模块的路由配置文件中定义接收参数的路由。例如，在懒加载模块的 lazy - routing.module.ts 中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailComponent } from './detail.component';

const routes: Routes = [
  {
    path: 'detail/:id',
    component: DetailComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LazyRoutingModule {}

在懒加载模块组件中接收和处理参数

在组件中接收参数：在懒加载模块的 DetailComponent 组件中，可以通过 ActivatedRoute 服务来获取传递过来的参数。

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

@Component({
  selector: 'app - detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  id: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
  }
}

这里使用 subscribe 来订阅 route.params 的变化，因为参数可能会在路由复用等情况下发生变化。同时，使用 + 将参数值转换为数字类型。

可能遇到的问题及解决方案

参数类型转换问题：
- 问题：从路由获取的参数默认是字符串类型，如果需要使用其他类型（如数字、日期等），可能会出现类型不匹配的问题。
- 解决方案：如上述代码中，使用 + 操作符将字符串类型的 id 参数转换为数字类型。对于日期类型，可以使用 new Date(params['date'] as string) 等方式进行转换。
路由复用问题：
- 问题：当路由复用（例如在同一组件之间导航，只是参数变化）时，ngOnInit 不会再次触发，导致无法更新参数。
- 解决方案：使用 route.params 的 subscribe 方法，这样即使 ngOnInit 不触发，也能监听到参数的变化并进行处理。如上述 DetailComponent 中的代码，通过订阅 route.params 来实时获取最新参数。
参数丢失问题：
- 问题：在复杂的路由跳转或嵌套路由场景下，可能会出现参数丢失的情况。
- 解决方案：确保在每一级路由导航时都正确传递参数。可以在导航前打印参数确认传递的值是否正确，同时检查各级路由配置是否正确定义了参数部分。例如，在嵌套路由中，父路由和子路由都要正确处理参数的传递和接收。

星途面试题库

面试题：Angular懒加载中的路由参数传递与处理

知识考点

面试题答案

传递路由参数

在懒加载模块组件中接收和处理参数

可能遇到的问题及解决方案