How to serialize ActivatedRoute to string in Angular 2?

Question

I'm trying to build breadcrumb to display in my "shell" component (one with <router-outlet>). I'm injecting Angular's Router service, and by traversing it from routerState.root down through its firstChild (or children[0]) property until null, building the (linked) list of components comprising currently displayed route. The result is a linked list of ActivatedRoute objects. As I'm attaching custom data to each defined route (e.g. title), that I can get (via ActivatedRoute.data member) at runtime, so I can display names of items in breadcrumbs.

But the problem is with links (urls). ActivatedRoute has all the info about particular route in chain, but I couldn't find a way to serialize it to single string value, to use as a link in breadcrumb. I could manually parse it of course, but this is waaaay too much work for something so essential. ActivatedRoute has urls (itself split in segments), query params, matrix params, etc. all in different properties (some of them even Observables, to unnecessarily complicate things)... but no single string property that gives complete urls (with params and everything).

Incidentally, the Router service has serializeUrl() member that takes parameter of type UrlTree, and converts it to string. Maybe there is some method that converts ActivatedRoute into UrlTree, so that I could then use Router.serializeUrl()?..

Simply: How can I get serialized string out of ActivatedRoute (or ActivatedRouteSnapshot) object? (Without writing the whole parsing logic myself obviously).

It seems so essential thing to need, as ActivatedRoute is essentially parsed representation of string url (if I'm understanding this whole concept correctly)... and Router even has helper method to stringify UrlTree object (which is never explained how to retrieve in the first place)...

Answer 1

router.createUrlTree can receive an ActivatedRoute.

@Component({
  selector: "foo"
})
class Foo {
  constructor(router: Router, route: ActivatedRoute) {
    const urlTree = router.createUrlTree(["."], { relativeTo: route });
    console.log(router.serializeUrl(urlTree));
  }
}