Home > database >  How to refresh the page in navigating from one page to other page in angular
How to refresh the page in navigating from one page to other page in angular

Time:03-10

In my angular application I have some navigation pages with router.

And my requirement is when it is navigating it has to reload the page.

.component.ts

if(ID == 0){
             this.router.navigate(['./Profilepage/'   ID]);
          }
           else{
            this.router.navigate(['./dashboard']);
            
           }


From the above code if I am already there in Profilepage with some ID, and if the condition in if condition satisfies then it has to go that particular Profilepage with that ID.

But for me it is not showing that redirecting, and is happening only after refreshing the page.

Can anyone help me how I can go to the particular page with the ID (if condition satisfies).

CodePudding user response:

your question is not quite clear but I think I get it:

you need to "listen" to the route, so you can detect every change in route and navigate according to that change. try something like this:

import { ActivatedRoute, Params } from '@angular/router';
export class SomeClass implements OnInit {

paramFromRoute;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
this.paramFromRoute = this.route.snapshot.params['paramName']; // this one is 
// required for getting it first time


this.route.params.subscribe((params:Params)=>{
this.paramFromRoute =  params['paramName'] // whenever route is changed, this 
function will triggered.
 });
// for queryParams you can subscribe to this.route.queryParams
}   
}

CodePudding user response:

My guess is you want to update the view with the new profile based on the id in the router params. That means you'll have to listen for changes in the activated route and a page reload isn't required at all.

See this page for an example: https://angular-training-guide.rangle.io/routing/routeparams

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
  this.activatedRoute.params
    .pipe(
        map(params => params.id)
    )
    .subscribe(profileId => {
        this.profileId =  profileId; // ( ) converts string 'id' to a number

       // Update view or profile object to load the details here.
    });
}
  • Related