Binding URL Params via RouterLink in Angular App

Question

I am trying to understand what a basic implementation of loading a routerLink while also pulling in saved url params would look like. Normally, the way I handle routing in my app is via a subscribing to an observable, that looks like this:

private onFilterProcessed(value: any, type: string, body, page)
{
    if (type === 'zip')
    {
        this.processType('addresses.zip', value);
    } if (type === 'location')
    {
        this.processType('addresses.city', value);

    this.filtersService.getByCategory(
        page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            let data = resRecordsData.data;
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

This allows me to pass in some filter parameters to the api call as part of the body in a POST request. This will return results where the user's filter selections are passed in before returning the data.

This all works as expected. When a user goes "back" to a previously loaded component, their previous filter selections will be passed into the api call, so the "page" looks just like it did when they were last on that page/component.

However, I also have a couple of sections in my app where I'm loading components via routerLink instead. They initially looked like this:

<a routerLink="/customer-history" routerLinkActive="selected">Customer History</a>

The thing is, now that I have filter params in the url, this alone won't work, because each time I click on these particular links, it will wipe out the url and re-load it with just the page identifier "customer-history" -- because that's what I'm currently telling it to do.

If, for instance, the filters had been used by the user to filter results based on a city, the url would look like this:

http://localhost:4200/customer-history;locations=true;locations_place=Seattle

So the problem is, if they were to click away, and then RETURN to that page/component via the routerLink link, instead of getting the filtered data for that page, it will instead load this:

http://localhost:4200/customer-history

So my question is about how to pass those url params in as part of the routerLink. I assume it would look something like this, with square brackets for binding:

<a [routerLink]="['/customer-history', getParams()]" routerLinkActive="selected">Customer History</a>

What I'm not clear on is how I get those specific url params (just the filter params, not the component/page name) and pass them in via binding like this.

I know Angular makes available activatedRoute.snapshot, which I could get like this, to pass into getParams():

getParams()
{
    return this.activatedRoute.snapshot;
}

But this will return the full url, not just the filter params part, which is what I need. So how would I get the part of the url I need, and pass it in here to append to "customer-history" in the url? What would that look like in a basic implementation?

Muirik · Accepted Answer · 2017-10-02 22:08:20Z

A way to resolve this, instead of using routerLink in the template, is to pass a function that resolves the correct page/component while subscribing to and navigating to that page and all relevant url params.

To do this I do this in the view:

<a (click)="goToCustomerHistory()">Customer History</a>

And that function in the component looks like this:

goToCustomerHistory()
{
    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.locations = params['locations'];
            this.locations_place = params['locations_place'];
        }
    );
    this.router.navigate(
        ['/customer-history', {
            page: this.page,
            locations = this.locations;
            locations_place = this.locations_place;
        }]);
}

And of course, you also need to import Router and ActivatedRoute and inject in the constructor:

constructor(private router: Router,
            private route: ActivatedRoute){}

Collectives™ on Stack Overflow

Binding URL Params via RouterLink in Angular App

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