feat(router) add possibilty to subscribe to current ActivatedRoute

[choeller]

I'm submitting a ... (check one with "x")

[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Since #9390 is implemented we are now able to add a data-Object to the RouteConfig. This object is attached to the ActivatedRoute. As of now, I currently can't seem to find a way to globally subscribe to that ActivatedRoute to implement some generic functionallity like setting the browser title.

Expected/desired behavior

It would be super useful to be able to subscribe to the current ActivatedRoute or at least to be able to get this information ad-hoc from the router (via snapshot?!). Something like this would be quite nice:

    router.activatedRoute.subscribe((route: ActivatedRouteSnapshot) => {
      if (route.outlet == PRIMARY_OUTLET) {
        this.titleService.setTitle(route.data['title'] || "My default title");
      }
    })

What is the motivation / use case for changing the behavior?

Be able to solve generic routing issues by accessing information about the current route.

Please tell us about your environment:

• Angular version: 2.0.0-rc.3
• Browser: [all]
• Language: [all ]

[brandonroberts]

The RouterState is a tree if ActivatedRoutes, so its already possible to get what you need although its not easy as what you've requested. You can subscribe to router events and map that to the routerState and to get the first activated route.

http://plnkr.co/edit/pHd89K?p=preview

[choeller]

Thanks a lot for that trick @brandonroberts . I had to do some little changes for it to support child-routes, so if anyone is interested here is what I did:

http://plnkr.co/edit/rn5qh6?p=preview

[Niaro]

@brandonroberts Hi, may you explain, please, how data observable prop shows up at the route? I try to do the same trick in my app, but data prop doesn't shows up...

[choeller]

@Niaro the data-field is not released yet. The plnkr uses the current master of angular. So if you want to use it in your app you currently need to build angular on your own.

[Niaro]

@choeller Okay...( Thank you)

[DzmitryShylovich]

if you want to use it in your app you currently need to build angular on your own

or u can use https://github.com/angular/router-builds

[Delagen]

+1

[vsavkin]

As Brandon pointed out the way to achieve this is to do something like this:

router.events.filter(e => e instanceof NavigationEnd).forEach(() => {
  // inspect the state and set the title
  // router.routerState 
})

Closing the issue.