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

Amey Amey · Accepted Answer · 2020-02-10T16:47:49

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

Angular navigate to the same component more then one time

2 Answers