如何在NavigationEnd事件中订阅Angular路由配置数据？

我懂你遇到的困扰——代码能正常拿到路由配置里data.header的正确值，但TypeScript偏要报类型错误，属实有点烦😅。这其实是因为TypeScript没法自动推断你路由data的具体结构，咱们一步步来解决它：

问题根源 #

Angular的Route.data返回的是Observable<Data>类型，而默认的Data是个宽泛的泛型，TypeScript不知道你自定义了header这个属性，所以直接访问this.route.firstChild.data.value.header时，会提示“属性header不存在于类型Data上”。

解决方案 #

方案1：定义路由数据接口（最规范） #

先创建一个接口来描述你的路由data结构：

// 可以放在组件文件里或者单独的类型文件中
interface CustomRouteData {
  header: boolean;
}

然后在订阅时用类型断言告诉TypeScript当前data的结构：

ngOnInit() { 
  this.router.events.pipe(
    filter(e => e instanceof NavigationEnd)
  ).subscribe(() => { 
    const routeData = this.route.firstChild.data.value as CustomRouteData;
    console.log(routeData.header); 
  }); 
}

方案2：结合RxJS操作符异步获取（更符合Angular最佳实践） #

直接访问.value其实不太推荐，因为Observable的value可能还没完全就绪（虽然这里在NavigationEnd之后大概率没问题，但异步处理更稳妥）。用switchMap来切换到data的Observable：

import { switchMap } from 'rxjs/operators';

ngOnInit() { 
  this.router.events.pipe(
    filter(e => e instanceof NavigationEnd),
    // 切换到路由data的Observable
    switchMap(() => this.route.firstChild.data)
  ).subscribe((data: CustomRouteData) => { 
    console.log(data.header); // 这里TypeScript能完美识别header属性
  }); 
}

方案3：快速临时解决（适合简单场景） #

如果不想定义接口，也可以用可选链+类型断言快速搞定：

console.log(this.route.firstChild.data.value?.header as boolean);

这样修改后，既能保持代码功能正常，又能让TypeScript不再报错啦～

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