Angular 9+路由数据获取问题：组件无法获取路由data属性？

看起来你遇到的问题是依赖注入错误导致无法获取路由data，我来帮你梳理问题和解决步骤：

问题根源 #

你在构造函数里注入的是Router，但尝试访问的是this.route.data——首先，this.route在你的代码里根本没有被正确注入（你注入的是router而不是route）；其次，Router本身并不提供当前路由的data observable，你需要的是ActivatedRoute服务，它专门用来获取当前激活路由的详细信息（包括data、参数、快照等）。

修正步骤 #

1. 导入并正确注入ActivatedRoute
   在你的组件文件顶部导入ActivatedRoute，然后在构造函数里注入它：

   import { ActivatedRoute } from '@angular/router'; // 必须导入这个
   
   constructor(private route: ActivatedRoute) {} // 注入ActivatedRoute，命名为route
   

2. 订阅ActivatedRoute的data可观察对象
   在ngOnInit里订阅this.route.data，就能拿到路由中定义的data了：

   ngOnInit(): void {
     this.route.data.subscribe((data) => {
       console.log('路由data:', data);
       // 你可以直接获取navigationType字段
       console.log('navigationType:', data.navigationType);
     });
   }
   

额外提示 #

• 如果你的路由参数不会动态变化（比如组件每次路由切换都会重新创建），也可以直接用snapshot获取一次性数据，不需要订阅：

  ngOnInit(): void {
    const routeData = this.route.snapshot.data;
    console.log('静态路由data:', routeData);
  }
  

• 如果你的组件是路由复用场景（比如同一个组件对应多个路由，或者路由参数变化但组件不销毁），this.route.data的订阅会自动在路由变化时发出新值，无需额外处理。

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