How to reload current page

Question

I have a page for editing user  it has some children components inside  Each children components can change or doing some effect to its parent component    So instead of emitting the changes to parent and updating some fields  I did a  reload  of the current page with       private route  ActivatedRoute   reload        this router navigate    admin user edit   this user id        Basically  it redirects to the current page  For example  the current page is  http   web info admin user edit 9 it will be redirected to this page with the hope all the data inside that page reloaded with the newest data   but it seems the angular won t redirect reload the same page with the router navigate  How I should reload a current page    Edit   Here is the reason why I need to reload the page instead of manually updating the data on the current page  I need to do updates on Other Component  when I did the update it will add something to History Component  I need to refresh the User Component and History Component together since both components affected by the changes in Other Component

User · Answer

With angular 11 you can just use this  in route config add runGuardsAndResolvers   always  const routes  Routes         path      component  Component  runGuardsAndResolvers   always         and this is your method to reload    reloadView    void       this router navigated   false      this router navigate           relativeTo  this route          this will trigger any resolver on that config

User · Answer

Because it s the same component  You can either listen to route change by injecting the ActivatedRoute and reacting to changes of params and query params  or you can change the default RouteReuseStrategy  so that a component will be destroyed and re-rendered when the URL changes instead of re-used

User · Answer

Not really refreshing the page but thought it would help someone else out there looking for something simple  ngOnInit        startUp      startUp           Codes    refresh           Code to destroy child component     startUp

User · Answer

Without specifying the path you can do  constructor private route  ActivatedRoute  private router  Router       reload       this router routeReuseStrategy shouldReuseRoute        gt  false    this router onSameUrlNavigation    reload     this router navigate           relativeTo  this route        And if you use query params you can do  reload             this router navigate           relativeTo  this route  queryParamsHandling   preserve

User · Answer

I believe Angular 6 has the BehaviorSubject object   My sample below is done using Angular 8 and will hopefully work for Angular 6 as well  This method is a more  quot reactive quot  approach to the problem  and assumes you are using and are well versed in rxjs  Assuming you are using an Observable in your parent component  the component that is used in your routing definition  then you should be able to just pulse the data stream pretty easily  My example also assumes you are using a view model in your component like so    vm   Observable lt IViewModel gt    And in the HTML like so     lt div  ngIf  quot  vm    async  as vm quot  gt   In your component file  add a BehaviorSubject instance    private refreshBs  BehaviorSubject lt number gt    new BehaviorSubject lt number gt  0    Then also add an action that can be invoked by a UI element      refresh         this refreshBs next 1        Here s the UI snippet  a Material Bootstrap button     lt button mdbBtn color  quot primary quot  class  quot ml-1 waves-dark quot  type  quot button quot  outline  quot true quot                       click   quot refresh   quot  mdbWavesEffect gt Refresh lt  button gt   Then  in your ngOnIt function do something like this  keep in mind that my example is simplified a bit so that I don t have to provide a lot of code      ngOnInit          this vm    this refreshBs asObservable   pipe        switchMap v   gt  this route queryParamMap         map qpm   gt  qpm get  quot value quot           tap v   gt  console log  query param value   quot   v  quot                simulate data load       switchMap v   gt  of v  pipe          delay 500           map v   gt     items                                catchError e   gt  of   items      error  e

User · Answer

Here is the simple one  if  this router  amp  amp  this router url            or your current page url e g   home       window location reload        else       this router navigate  url

User · Answer

import   DOCUMENT   from   angular common   import   Component  Inject   from   angular core     Component     selector   app-refresh-banner-notification     templateUrl     refresh-banner-notification component html     styleUrls      refresh-banner-notification component scss       export class RefreshBannerNotificationComponent      constructor       Inject DOCUMENT  private  document  Document           refreshPage         this  document defaultView location reload

User · Answer

It will work 100   The following lines of code are responsible for page reload in my project   load val    if  val    this router url      this spinnerService show      this router routeReuseStrategy shouldReuseRoute   function          return false              Just use the following part in your code   this router routeReuseStrategy shouldReuseRoute   function          return false

User · Answer

A little bit tricky to do something so simple but had no luck trying to reload and recreate the entire parent  amp  child components with current solution   Angular Router now provides strategy configuration to tell the Router what to do in case you navigate to the same URL as this user suggests in this GitHub issue   First of all you can configure what to do while setting up the Router  your router module     NgModule      imports   RouterModule forRoot routes    onSameUrlNavigation   reload          exports   RouterModule       Or  if you are like me and don t want to change the entire router module behaviour you can do it with a method function like this   reloadComponent         this  router routeReuseStrategy shouldReuseRoute        gt  false      this  router onSameUrlNavigation    reload       this  router navigate    same-route         Of course you have to first inject Router in your component s constructor      import   Router   from   angular router       constructor private  router  Router          Somehow and as pointed out by  Abhiz you have to set shouldReuseRoute  with just configuring the Router by itself the page reload doesn t work with this aproach    I ve used an arrow function for shouldReuseRoutebecause new TSLint rules won t allow non-arrow functions

User · Answer

private router  Router  this router navigateByUrl url    It will redirect to any pages without data lost  even current page   Data will remain as is

User · Answer

I found a better way than reload the page  instead i will reload the data that just got updated  this way faster n better

User · Answer

I have solved following this way import   Router  ActivatedRoute   from   angular router    constructor private router  Router             private activeRoute  ActivatedRoute       reloadCurrentPage       let currentUrl   this router url     this router navigateByUrl       skipLocationChange  true   then      gt       this router navigate  currentUrl

User · Answer

This is the most simple solution if you just need to refresh the entire page     refreshPage         window location reload

[javascript] How to reload current page?

Examples related to javascript

Examples related to angular