How to navigate to self using Angular 2 RC.1 router w/ query params

Question

What is the correct way to set query params using router.navigate() during component initialization (w/o triggering component reload)? I have tried a few variations, but all fail. I have an app-component with @Routes, a parent-component with @Routes and a child-component. App route is '/:evt'->ParentComponent, parent route is '/child'->ChildComponent. The child component has

routerOnActivate(curr:RouteSegment) {
    this.route = curr;
}
ngOnInit() {
    ...
    this.updateUrl();
    ...
}
updateUrl() {
    var query = { x=1, ... };
    // Option 1
    this.router.navigate(['child', query]);
    // Option 2
    this.router.navigate(['./child', query]);
    // Option 3 - full /:evt/child
    this.router.navigate(['/', this.event.id , 'child', query]);
    // Option 4
    this.router.navigate(['child', query], this.route);
}

Option 1 & 2 makes the component fail to load or at least put it in a bad state. But there are no errors in the log.
Option 3 will reload the full route and jump to top of page. So can't be used, but seems to work.
Option 4 triggers a reload of component. So I get activate, init, activate, init, and then 2x router.changes of final url, no route change event for initial route of /:evt/child, only /:evt/child;x=1; twice. Followed by an exception about missing routes on child component from _recognize.

I also tried calling router.navigate() during child constructor, but that triggered an infinite component reload loop that crashed Chrome :).

In Angular 1 you could just call $location.search(query) during component init to update query params w/o component reloading. In Angular 2 RC 1 (Restart/Reset/Redo Candidate ;) I can't find the equivalent call.

How to navigate to self using Angular 2 RC.1 router w/ query params

0 Answers0