routerLink with parameters is changing the URL but not navigating or reloading the component

Question

I already checked the related question router.navigate changes the URL, but is not rendering the component but that same scenario is causing the same result.

I have a route in my routes module:

        {
            path: "competition/details",
            loadChildren: "../pages/competitions/competitions-details/competitions-details.module#CompetitionsDetailsModule"
        }

That page ("competition-details") renders my element:

<standings-regular></standings-regular>

Then in the component I check for 2 optional params:

    this.competitionId = this.activatedRoute.snapshot.params.competition;
    this.condition = this.activatedRoute.snapshot.params.condition;

And finally I use those params "competition" and "condition" to build an array. So far everything works if I use the URL directly in the browser:

e.g.: http://localhost:4200/competition/details;competition=219;condition=home

Now, this basically represents different views of the same table for a given competition, for a little context.

http://localhost:4200/competition/details;competition=219;condition=home will render standings table with only home matches for each team from competition 219.

http://localhost:4200/competition/details;competition=219 creates the table with all matches from competition 219.

So, I would like to have a link within the same table to navigate to the new URL but when I try to do that It only changes the URL in the browser but does not change the view.

Here is how I'm trying to navigate:

        <ul class="dropdown-menu btn-primary dropdown-menu-right">
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219'}]">Completa</a>
            </li>
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219', condition: 'home'}]">Home Only</a>
            </li>
        </ul>

I've also tried replacing routerLink here with a (click)="" event that triggers a method in the component to navigate but the result was the same, change the URL in the browser, but does not do anything.

I tried both router.navigate() and router.navigateByUrl()

Any thoughts?

Answer 1

Instead of taking values of parameter from "snapshot.params" you should subscribe to the activatedRoute as given below.

import { ActivatedRoute, Router, ParamMap } from "@angular/router";

put this code in your ngOnInit()

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.competitionId = params.get('competitionId ');
    let condition = params.get('condition ');
    //business logic what changes you want on the page with this new data.
});

By snapshot, Reloading do not occur when changing path parameters in url because constructor is not called. But using subscribe it will listen to the changes taking place in parameters.