Angular 14路由参数读取报错：Cannot read 'getContext'问题求助

问题场景 #

在Angular 14中实现通过路由ID获取任务详情，路由配置添加:id参数后触发以下错误：

ERROR TypeError: Cannot read properties of null (reading 'getContext')

直接传入固定ID调用服务方法可正常运行，仅添加路由:id参数后报错。

相关代码 #

路由配置

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'missions-list',
        component: ListMissionsComponent,
        data: { title: 'Missions' },
      },
      {
        path: 'mission-details/:id',
        component: MissionDetailsComponent,
        data: { title: 'Détails du mission' },
      },
      {
        path: 'add-mission',
        component: AddMissionComponent,
        data: { title: 'Ajouter une mission' },
      },
    ],
  },
];

服务方法

getById(id: number): Observable<Mission> {
  return this.http.get(`${baseUrl}/${id}`);
}

组件TS代码

ngOnInit(): void {
  this.getMissionById(this.activatedRoute.snapshot.params['id']);
}

getMissionById(id: any): void {
  this.missionService.getById(id)
    .subscribe({
      next: (data) => {
        this.mission = data;
        console.log(data);
      },
      error: (e) => console.error(e)
    });
}

错误原因分析 #

这个错误并非路由参数配置本身导致，而是以下常见场景引发：

1. 组件模板在mission数据未加载完成时，直接访问其属性或依赖DOM元素的方法（如getContext，常见于图表类组件）；
2. 路由参数传递的是字符串类型，而服务方法接收number类型，可能导致API请求异常，最终mission仍为null；
3. 第三方组件/指令在DOM元素未初始化时执行了依赖元素的操作。

解决方案 #

1. 初始化mission对象，避免空引用 #

在组件中为mission设置初始值，防止数据加载前模板访问null属性：

// 组件类中定义
mission: Mission = {} as Mission;
// 或根据Mission接口设置更贴合的默认值
// mission: Mission = { id: 0, name: '', ... };

2. 模板中使用安全导航操作符（?.） #

所有访问mission属性的地方添加?.，确保仅当mission不为null/undefined时才访问属性：

<!-- 修改前 -->
<!-- {{ mission.name }} -->
<!-- 修改后 -->
{{ mission?.name }}

<!-- 如果是依赖getContext的DOM元素（如canvas），用*ngIf确保元素存在后再渲染 -->
<canvas *ngIf="mission" #missionChart></canvas>

3. 转换路由参数类型为数字 #

路由参数默认是字符串，需转换为number后再传给服务方法，避免API请求异常：

ngOnInit(): void {
  // 用+号或Number()转换为数字
  const missionId = +this.activatedRoute.snapshot.params['id'];
  this.getMissionById(missionId);
}

// 同时修改getMissionById的参数类型为number
getMissionById(id: number): void {
  this.missionService.getById(id)
    .subscribe({
      next: (data) => {
        this.mission = data;
        console.log(data);
        // 如果有图表初始化逻辑，放在这里执行
        // this.initChart();
      },
      error: (e) => console.error(e)
    });
}

4. 延迟第三方组件初始化 #

如果使用了依赖getContext的组件（如Chart.js），确保在mission数据加载完成后再初始化：

// 组件类中
@ViewChild('missionChart') missionChart!: ElementRef<HTMLCanvasElement>;

initChart(): void {
  if (this.missionChart?.nativeElement) {
    const ctx = this.missionChart.nativeElement.getContext('2d');
    // 初始化图表逻辑
  }
}

// 在subscribe的next回调中调用
next: (data) => {
  this.mission = data;
  setTimeout(() => this.initChart(), 0); // 确保DOM已更新
}

内容的提问来源于stack exchange，提问作者Kaisama-x001