Page is not refreshing with the updated address bar link with id in angular-CodePudding

In my angular application I have Implemented signalR application for calls interation for members and admin. in admin page(Admin has members page with profiles)

So my requirement is when the admin receives the call from members(basically in admin page) is has to show the particular mamber page every time when the call happens.

.component.ts

private hubConnection: signalR.HubConnection
  async startConnection() {
    this.hubConnection =    new signalR.HubConnectionBuilder()
         .withUrl(Notifications,{
          skipNegotiation: true,
          transport: signalR.HttpTransportType.WebSockets
         })
         .build();
          await this.hubConnection
         .start()
         .then(() => console.log('Connection started' ))
         .catch(err => console.log('Error while starting connection: '   err))
   
          this.hubConnection.invoke("RegisterAsync", this.Email)
       
          this.hubConnection.on("CallConnected", (EmailId:string, MemberID:number) => {
          
         if(!(MemberID == 0)){
             this.router.navigate(['./memberPage/'   CallingMembersID]);
          
           }
           else{
            this.router.navigate(['./searchPage']);
            
           }
         
          })
          }

In the above code if the admin is in other pages (within the admin page) it is workin gproperly i.e based on the condition it is showing the member profile page.

But only one condition is not working that is when admin is already in memberPage and if the condition satisfies it has to show the other memberPage with that particular Id but here it is showing the updated member Id in address bar but not navigating the page to that particular page.

I stucked in this condition only can any one help me on the same

CodePudding user response：

This is the natural behavior of angular when you try to navigate to same url. You may refer to this: Angular - Navigate to current same URL with component reload not the whole page

CodePudding user response：

Just add a subscription to the activatedRoute like

in you component.ts

    constructor(private activatedRoute: ActivatedRoute,....){}
    
    ngOnInit(){
      this.activatedRoute.paramMap.subscribe((params) =>{ params.get('CallingMembersID') // Or however you called this param;
     // Your logic
      }) 
    
    }