Angular 2路由器 - 无法从服务中获取静态路由数据

Question

使用 angular/router 3.0.0-rc-2，我无法从我创建的服务中检索定义在路由上的数据。

但是，我可以通过注入(inject) ActivatedRoute 从为该路由定义的组件中检索数据。

这是我的路线:

export const CommonRoutes:RouterConfig = <Route[]>[
    {
        path: '',
        component: Home,
        data: {
            someKey: true
        }
    }
];

这是有效的实现，但不是我想要的方式，因为我需要服务能够处理此逻辑:

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

@Component({
    //component config...
});

export class Home {

    constructor(private _route: ActivatedRoute ) {
        this._route.data.subscribe(data => {
            console.log(data);
        })
    }
}

如您所料，Home 组件在加载时输出:

{
    someKey: true
}

但是，当将此逻辑移动到注入(inject)到主应用程序组件的服务中时，它会记录一个空对象。

我也尝试过订阅路由器导航事件，这产生了同样的差异。

我想知道这是否更像是一个范式问题。 ActivatedRoute 文档组件描述说:包含有关在 socket 中加载的组件的信息。信息是通过参数、urlSegments 和数据可观察对象提供的。 - 这让我认为这只会使链接到路由的组件可以使用路由信息。

因此，我尝试了另一种方法 - 直接通过路由器并使用 Router.routerState。以下是 service 类代码(这是我需要此逻辑发生的地方):

//...truncate imports/injectable decorator....

constructor(private _router:Router) {
    this._router.events
        .filter(evt => evt instanceof NavigationEnd)
        .subscribe(data => {
            console.log(_router.routerState.snapshot.root.data);
        });
}

这似乎意外地将空对象记录到控制台。

我对路由器的工作方式/应该如何使用有一些基本的误解吗？我觉得向路由器询问当前路由上静态定义的数据应该是组件应该能够做的事情。但也许我疯了。但是，对于依赖于可能存在或可能不存在于每个组件中的配置变量的全局逻辑，保证在服务中执行此操作。

我的一部分感觉这种过度限制的设计是 Angular 1 中的一个缺陷，他们在其中规定了“最适合你”的东西，而没有考虑到现实世界的情况并不总是规定相同的架构这一事实...

不确定它是否相关，但我正在通过 webpack 运行这个项目。

感谢任何帮助。

Answer 1

我相信这家伙给了一个working example answer .

静态数据似乎被遮蔽和掩埋了，但它是存在的。在您的情况下，这将是(注意 firstChild 属性):

constructor(private _router:Router) {
    this._router.events
        .filter(evt => evt instanceof NavigationEnd)
        .subscribe(data => {
            console.log(_router.routerState.root.firstChild.snapshot.data);
        });
}

在本地试过，它对我有用。