Angular navigate to the same component more then one time

Question

I am trying to navigate to the same route by using [routerlink] at the nav bar. since in angular, redirect in to the same component to invoke ngOnint is not possible i faced this problem.

navigation at the nav bar

[routerLink]="['/customer/events']"

code in the constructor

  constructor(
     private navbarService: ServicesInterCustomerNavbarService,
     private router: Router,
     private route: ActivatedRoute
  ) {
     this.route.params.subscribe(params => {
       this.selectedEventId = params["id"];
       this.getfunction();
    });
 }

my ngOnInit is like below

ngOnInit() {
    this.ongoing = [];
    this.navbarService.sendCurrentRoute("home");
    this.route.firstChild && this.route.firstChild.params.subscribe(params => {
      this.selectedEventId = params["id"];
      this.getfunction();
    });
}
getfunction() {
    this.ongoing = [];
    this.eventService.getOnging().subscribe(data => {
      this.ongoingEvents = data["data"].map(event => new CustomerEvent(event));
      if (!this.selectedEventId && this.selectedEventId != 'completed' && this.ongoingEvents.length >0) {
        this.redirectToEvent(this.ongoingEvents[0]._id);
      }
      if(this.ongoingEvents.length <1){
        this.redirectToEvent('-1');
      }
      this.dataLoaded = true;
    });
  }

  eventCreated(event_id: string) {
    this.router.navigate(["/customer/events/ongoing", event_id]);
    this.newEventWindow = false;

  }

  redirectToEvent(event_id: string) {
    this.router.navigate(["/customer/events/ongoing", event_id]);
  }

the router link after the click the router navigation for the first time is something like

/customer/events/ongoing/sda3i4un34j3b42

but when i try to click the same navigation button, the router link is like below

/customer/events/

the problem here is not calling the getfunction() and the OnInit Can anyone figure this out?

Thanks

score 2 · Answer 1 · answered Feb 10 '20 at 16:47

2

you should just make a function redirect which enable shouldreusestartergy

reInitComponent(){
this.router.routeReuseStrategy.shouldReuseRoute = () => false;

this.router.navigate(["/customer/events/ongoing", event_id]);

}

call this reInitComponent() whenever you want to reload and call all angular lifecycle hooks

answered Feb 10 '20 at 16:47

Amey

795
8
31

thank you! But i used this approach. But what happens when the event id = -1, the component will re initiate in a never ending loop. any idea? – Charuka Herath Feb 10 '20 at 16:52
1

just check on ngOnInit method the parameter id if its -1 then dont call the the reload function else call the reload function – Amey Feb 10 '20 at 16:54
yes true, but according to my code, i do not pass any parameter through [routerlink], so there won't be any parameters. there for i used reuse strategy within the constructor. – Charuka Herath Feb 10 '20 at 17:18
just pass an optional or required parameter in routerLink code as :/id – Amey Feb 10 '20 at 19:54
Thanks! I fixed with this by using the below approach. – Charuka Herath Feb 11 '20 at 02:48

score 0 · Answer 2 · answered Feb 11 '20 at 02:47

We can add a query param which is dynamically change.

this.router.navigate(['/routedComponent'], {
   queryParams: {refresh: new Date().getTime()}
});

So we can check whether the query param is changed within the constructor and pass the function which we need to execute.

With this approach issue in routing to the same component with different params can be fixed

Angular navigate to the same component more then one time

2 Answers2