The routerLink function with parameters successfully updates the URL, however, it fails to navigate or refresh the component

Question

The routerLink function with parameters successfully updates the URL, however, it fails to navigate or refresh the component

I have already reviewed a similar question titled router.navigate changes the URL, but is not rendering the component but encountered the same issue in my scenario.

Within my routes module, I have a route defined as follows:

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

The "competition-details" page renders the element:

<standings-regular></standings-regular>

In the component, I extract 2 optional parameters:

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

Using these parameters, I construct an array to display different views of the same table based on the URL provided directly in the browser:

For example:

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

These URLs represent various views of the same table for a specific competition.

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

will show the standings table with only home matches for each team in competition 219.

http://localhost:4200/competition/details;competition=219

will display the table with all matches from competition 219.

Now, I want to include a link within the table to navigate to a new URL. However, when attempting to do so, the URL changes in the browser but the view remains the same.

My navigation attempt is shown below:

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

I have attempted using both router.navigate() and router.navigateByUrl() to no avail.

Any insights on how to resolve this issue?

angular typescript angular4-router

Answer 1

Answer №1

To avoid relying on values from "snapshot.params," it is recommended to subscribe to the activatedRoute as demonstrated below.

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

Add this code to your ngOnInit() method.

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.competitionId = params.get('competitionId ');
    let condition = params.get('condition ');
    // Implement business logic to update the page based on the new data.
});

Unlike using snapshot, subscribing ensures that changes to path parameters in the URL trigger a reload, as the constructor is not invoked. Subscribing listens for changes in parameters.

Answer 2

To avoid relying on values from "snapshot.params," it is recommended to subscribe to the activatedRoute as demonstrated below.

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

Add this code to your ngOnInit() method.

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.competitionId = params.get('competitionId ');
    let condition = params.get('condition ');
    // Implement business logic to update the page based on the new data.
});

Unlike using snapshot, subscribing ensures that changes to path parameters in the URL trigger a reload, as the constructor is not invoked. Subscribing listens for changes in parameters.

The routerLink function with parameters successfully updates the URL, however, it fails to navigate or refresh the component

Answer №1

Similar questions

Tips for incorporating a conditional background color in a styled component with react and typescript

Unveiling the Navigation Strategies Embedded in Angular Components

The combination of using the .share() method with the .subscribe() method is resulting in

What is the best way to attach events to buttons using typescript?

Increasing the number of service providers in Angular2-4 directives

A guide to building a versatile component using Ionic 3 and Angular 4

Deleting the last item from an array in Typescript

Creating a TypeScript type that supports a flexible number of generic parameters

Angular 2 dropdown list that allows users to add a personalized value in the HTML code

Tips for accessing an item from a separate TypeScript document (knockout.js)

After updating the file path, the Next.Js module couldn't be located: Module not found – Unable to

ability to reach the sub-element dictionaries in typescript

Tips for implementing collapsible functionality that activates only when a specific row is clicked

Do interfaces in Typescript require nested properties to be mandatory?

Trouble arises when attempting to transfer cookies between server in Fastify and application in Svelte Kit

Having troubles with Angular 2 subscription functionality?

Tips for showing that every field in a typed form group must be filled out

The CORS policy has blocked access to 'http://localhost:8080/BeginSignup' from 'http://localhost:4200'

"Unlocking the Power of Monaco Editor: A Guide to Fetching CompletionItems from Your

What setting should I adjust in order to modify the color in question?