升级至Angular 15时出现路由错误：Route类型无text属性

问题原因 #

Angular官方的Route类型定义中不存在text属性，升级到Angular 15后，TypeScript类型检查严格性提升，之前被忽略的自定义非法字段text触发类型错误。

修复步骤 #

1. 修改路由配置，将text字段移至data元数据中 #

官方推荐使用data字段存储路由自定义元信息，修改后的路由代码如下：

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: "dashboard", component: DashboardComponent, data: { text: "Dashboard" } },
  { path: "heroes", component: HeroesComponent, data: { text: "Heroes" } },
];

2. 更新组件中读取文本的逻辑 #

如果之前代码中直接读取路由的text属性，现在需要改为从route.data中获取：

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

// 组件构造函数或初始化逻辑中
constructor(private route: ActivatedRoute) {
  // 快照方式获取静态路由数据
  const routeText = this.route.snapshot.data['text'];
  // 订阅方式监听路由变化时的动态数据
  this.route.data.subscribe(data => {
    const routeText = data['text'];
  });
}

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