Angular route to same component with different parameters

Question

I have a component that can route to itself but with different route parameters.

As you probably know this wont fire the constructor or ngOnInit.

To get around this I have the following in my constructor

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
}

This solve the problem but I realize that my routes go crazy when using it. For instance a link to a totally different route becomes active and when I hover over it, it seems to have changed from the url it should be to the current URL. (hard to describe)

Steve Land · Accepted Answer · 2018-08-13 18:49:30Z

16

I'd suggest an alternative approach - overriding the Angular routing logic is likely to be error prone (as you've already discovered), and I'm fairly sure that you should be able to achieve what you're after in other, simpler ways.

One way would be writing a setup method that you can call when you need to setup (or reset) your component and then subscribing to the params observable on the ActivatedRoute, using that event to call your setup method - like this:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

  setupMessage = 'not set up yet';
  someParameterValue = null;

  constructor(private activateRoute: ActivatedRoute) {
    activateRoute.params.subscribe(params => {
      this.setupComponent(params['someParam']);
    })
  }

  setupComponent(someParam) {
    this.setupMessage = 'set up at ' + new Date();
    this.someParameterValue = someParam;
  }
}

Here is a working stackblitz demo of this.

answered Aug 13, 2018 at 18:49

Steve Land

4,8622 gold badges20 silver badges39 bronze badges

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

1 Comment

Eugene P. Over a year ago

It is more correct to subscribe inside ngOnInit method, isn't it?

Alf Moh · Accepted Answer · 2018-08-13 16:07:38Z

Changing the shouldReuseRoute function to just return false is what might be causing the problem. You can try this.

  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return curr.routeConfig === null && future.routeConfig === null;
  }

As a matter of fact, you re-implement the RouteReuseStrategy class. Had a similar problem and had help from github but unfortunately I can't remember the link.

This is how it will look like.

customReuseRouteStrategy.ts

import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,
  RouteReuseStrategy
} from "@angular/router";

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(
    route: ActivatedRouteSnapshot,
    detachedTree: DetachedRouteHandle
  ): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return null;
  }
  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return curr.routeConfig === null && future.routeConfig === null;
  }
}

Then in your module providers, you will replace RouteReuseStrategy with the class you just created.

yourmodue.module.ts

 providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomRouteReuseStrategy
    }
  ]

I found this solution elsewhere and it did nothing, but thanks

Collectives™ on Stack Overflow

Angular route to same component with different parameters

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related