javascript - Angular - Recreate Component On Self Route Change - Stack Overflow

admin管理员组

文章数量:1301537

I have an angular app with a navigation bar. I have received a request to refresh the ponents data when the user re-clicks on the link which matches the current page. After a little reading, I understood that I need to set the onSameUrlNavigation to 'reload' and catch the event in the ponent and refresh the data within it. Although I'm aware this is the best solution and there is no need for the ponent to be recreated, I am trying to find some quick fix for all my routes without writing a lot of code to support this behavior. Is there a way I can force all my ponents to be destroyed and recreate when the new route matches the current route? maybe create some kind of directive on router-outlet or some other quick fix?

Best, Tal Humy

I have an angular app with a navigation bar. I have received a request to refresh the ponents data when the user re-clicks on the link which matches the current page. After a little reading, I understood that I need to set the onSameUrlNavigation to 'reload' and catch the event in the ponent and refresh the data within it. Although I'm aware this is the best solution and there is no need for the ponent to be recreated, I am trying to find some quick fix for all my routes without writing a lot of code to support this behavior. Is there a way I can force all my ponents to be destroyed and recreate when the new route matches the current route? maybe create some kind of directive on router-outlet or some other quick fix?

Best, Tal Humy

• javascript
• angular
• angular-routing

Share Follow asked May 17, 2020 at 15:36 Tal HumyTal Humy 1,22722 gold badges2222 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I just encountered a problem where a navigation from /user/1/roles to /user/2/roles was re-using the ponent associated with /roles. This is because by default, Angular prefers to re-use ponents where it can, in order to be more memory-efficient.

Start by creating a CUSTOM ROUTE REUSE STRAGETY as follows:

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';

export class DefaultRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {
    return null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false; // <-- Here is the critical line of code which forces re-creation of the ponent
  }
}

And register it in your AppModule as follows:

@NgModule({
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: DefaultRouteReuseStrategy,
    },
  ],
})
AppModule {}

I have an angular app with a navigation bar. I have received a request to refresh the ponents data when the user re-clicks on the link which matches the current page.

How is navigation bar constructed? Is it an array of li a elements with [routerLink] binding? If so, you can change that to (click)=refreshOrGoToPage(path, $event) binding and do necessary stuff inside event handler.

Example

import { Router } from '@angular/router';

  constructor(private _router: Router) {}

  refreshOrGoToPage(path: string, event: MouseEvent) {
    if(this._router.url === path) {
      this.refreshData();
      return;
    }

    this.router.navigate([path, {}]);
  }

--Edit

This is open issue in Angular and there some workarounds

Here's interesting one

If you navigate manually to the route, you can always navigate to an empty route first, then navigate to the route you want.

You could change example code above with:

if(this._router.url === path) {
  const emptyPath = '/reload';

  this.router.navigate([emptyPath, {}]).then(_ => {
    this.router.navigate([path, {}])
  })
  return;
}

You can subscribe to the events of the Router class as such:

protected previousUrl: string = '';
protected currentUrl: string = '';

In the constructor:

  constructor(
    private _router: Router,
  ) { }

In your ngOnInit (or somewhere else):

this._router.events.subscribe(event => {
          if (event instanceof NavigationEnd) {
            this.previousUrl = this.currentUrl;
            this.currentUrl = event.url;
          }
        });

本文标签： javascriptAngularRecreate Component On Self Route ChangeStack Overflow