Question

使用angular / router 3.0.0-rc-2，我在从我已创建的服务中检索路由中定义的数据时未能成功。

但是，我可以通过注入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
}

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

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

我想知道这是否更像是范式问题。 ActivatedRoute文档组件描述说：Contains the information about a component loaded in an outlet. The information is provided through the params, urlSegments, and data observables. - 这使我认为这只会使路由信息可用于链接到路由的组件。

所以，我尝试了另一种方法 - 直接通过路由器并使用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中的一个缺陷，他们在那里规定了最适合你的东西＆＃34;没有考虑到现实世界的情况并不总是指示相同的架构......

不确定它是否相关但我通过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);
        });
}

在当地尝试，它对我有用。

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

1 个答案: