Not able to redirect the route after windows reload

Question

I have two pages and those are role-list and role-details. There is requirement that depends on role that i need to hide the menu options after save button click. This i am able to fulfill with the below code

windows.location.reload();

after reload i need to navigate to the different page.. for that purpose i am using below code.

if(this.menuHide == "true"){     
   window.location.reload();
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate(['role-list']));
}

also tried with these options as well

this.router.navigate(['/role-list']));
this.router.navigateByUrl('/role-list');

the code below reload method is not executing that means it is not redirecting to role-list page. I am using angular 7 version.

Could any one please suggest any ideas on how to navigate to other page that would be grateful to me, many thanks in advance.

Once you do `window.location.reload();`, won't the next code not execute by design since you are telling the browser to reload? Have you thought about using a shared Angular service to show/hide the menu instead of reloading the page? — Daniel W Strimpel, Sep 17 '19 at 22:29

score 0 · Answer 1 · answered Sep 17 '19 at 23:25

You should not be calling

window.location.reload();

What you are doing here is reloading the entire page and destroying the Angular app. You should never be doing this in a single page application such as those created with Angular. Any code following the call to reload will never be executed as you have destroyed the entire JavaScript application and reloading the entire thing from scratch which is never desirable.

In Angular we use a modern style of programming called Reactive Programming based on RxJs observables. This is a concept well beyond the scope of a StackOverflow answer but your menu should be reacting to an Observable of roles.

Hiras Haris · Answer 2 · 2019-09-18T06:11:12.280

0

if you want to hide only menu you dont need to reload entire page, just implement a hide function and use it. for opening in the new tab is not possible only with "router" you have to create the link separately and call it with "window.open()" function.

this may help you with routing

edited Sep 18 '19 at 06:11

answered Sep 18 '19 at 06:05

Hiras Haris

468
4
18

I can not be able to hide the menu , as it is driven from DB, Also i am not looking for open in a new tab in the browser instead i am looking for same tab refresh.. – Glory Raj Sep 18 '19 at 13:45

score 0 · Accepted Answer · answered Sep 18 '19 at 16:26

I have solved this issue by using below code

  if(this.menuHide == "true"){
      this.router.navigate(['/role-list']).then(()=>{
           window.location.reload();
       });
    }

It is working perfectly fine .. Thank you all for your valuable suggestions.

Not able to redirect the route after windows reload

3 Answers3