Angular2 Router navigate with multiple params issue

Question

I'm trying to get the Angular2 new router working and I got most of it so far, except one annoying issue I can't solve.

For some reason when I use the router's navigate function with 2 parameters (matrix params) it will not run the subscribe code if one of the params is already populated and not changed, even if the other param changes.

Example:

import {ActivatedRoute, Router} from '@angular/router';
@Component({.... })

export class AnalystSearch implements OnInit, OnDestroy {
    querySubscriber: any;
    filterString:string;
    constructor(private route:ActivatedRoute, private router:Router) {
    }

    ngOnInit() {
        this.querySubscriber = this.route.params.subscribe(params => {
            //Do Things
        });
    }

    ngOnDestroy() {
        this.querySubscriber.unsubscribe();
    }

    filter():void {

        let params:any = this.route.snapshot.params;
        params["filter"] = encodeURIComponent(this.filterString);
        params["search"] = params["search"] || "";

        this.router.navigate(["/analysts", {search: params.search, filter: params.filter}]);
    }
}

Usually when filter() is called params already contains a search value (meaning - {search: "someRandomString"} and the change is that I add/modify the filter attribute (so it looks like - {search: "someRandomString", filter: "someFilterString"} )

I can see the url changing accordingly, but the code in the params.subscribe isn't running!! Why??

Note that if I change the value in the param.search attribute it will fire the code in params.subscribe.

Thanks for your help!

So I set up this exact thing and it works for me. I am using @angular/router version 0.2.0. So I do not believe it is a bug in the navigate functionality. What triggers filter() to be called? Is it a button click? That is what I had it wired into in my example. — Pace
– Pace, Commented Jul 24, 2016 at 13:27

Yaron Schwimmer · Accepted Answer · 2016-07-24 13:28:29Z

2

In this comment on a similar issue, it is suggested that you target the parent router to get the params.

In your case, something like

this.router.routerState.parent(this.route).params.subscribe(params => {...})

should do the trick.

I have no idea why it has to be so ugly. I expected this to work the way you did it.

answered Jul 24, 2016 at 13:28

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Router navigate with multiple params issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related