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?

Mining

A similar question was asked here. Maybe it will of some help. – Quintie

Try this: ngOnChanges(){this.ngOniInit()}. It works for me. – Tophole

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.

Nuriel

Working perfect! Great answer! – Guiana