How to refresh the current page in Angular? Method introduction

This article will share with you several Angular methods to refresh the current page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Angular's several methods of refreshing the current page

---

By default, when a request to navigate to the current URL is received, Angular router will ignore it.

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

The page will not refresh if you click the same link repeatedly.

The onSameUrlNavigation attribute is provided from Angular 5.1 to support reloading routes.

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

onSameUrlNavigation has two optional values: 'reload' and 'ignore', the default is 'ignore'. But just changing onSameUrlNavigation to 'reload' will only trigger the RouterEvent event, and the page will not be reloaded. Other methods need to be used. Before continuing, we enable Router Trace and check the routing event log from the browser console:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload', enableTracing: true})],
  exports: [RouterModule]
})

You can see that when onSameUrlNavigation is not configured, clicking the same link again will not output the log. Configure onSameUrlNavigation as 'reload ', a log will be output, which contains events: NavigationStart, RoutesRecognized, GuardsCheckStart, GuardsCheckEnd, ActivationEnd, NavigationEnd, etc.

Related tutorial recommendations: "angular tutorial"

The following introduces several methods of refreshing the current page:

NavigationEnd

1. Configure onSameUrlNavigation as 'reload'

2. Listen to NavigationEnd event

Subscribe to Router Event, reload data in NavigationEnd, and destroy the component Unsubscribe:

export class HeroesComponent implements OnDestroy {
  heroes: Hero[];
  navigationSubscription;

  constructor(private heroService: HeroService, private router: Router) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.init();
      }
    });
  }

  init() {
    this.getHeroes();
  }

  ngOnDestroy() {
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }
  ...
}

This method can configure the page to be refreshed as needed, but the code is cumbersome.

RouteReuseStrategy

1. Configure onSameUrlNavigation to 'reload'

2. Customize RouteReuseStrategy and do not reuse Route

There are two implementation methods:
Change the strategy in code:

constructor(private heroService: HeroService, private router: Router) {
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
}

Angular applies Router as a singleton object, so using this method, changing the strategy in one component will affect other component, but the Router will be re-initialized after refreshing the page from the browser, which can easily cause confusion and is not recommended.

Customized RouteReuseStrategy:

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

export class CustomReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }

}

Use custom RouteReuseStrategy:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
  providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ]
})

This method can implement a more complex Route reuse strategy.

Resolve

Using Resolve, you can obtain data from the server in advance, so that the data is ready before the route is activated.

1. Implement ResolverService

Transfer the initialization code in the component to Resolve:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

import {HeroService} from '../hero.service';
import {Hero} from '../hero';

@Injectable({
  providedIn: 'root',
})
export class HeroesResolverService implements Resolve<Hero[]> {
  constructor(private heroService: HeroService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero[]> | Observable<never> {
    return this.heroService.getHeroes();
  }
}

Configure resolver for routing:

path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}

2. Modify the component Code, change to get data from resolve

constructor(private heroService: HeroService, private route: ActivatedRoute) {
}

ngOnInit() {  this.route.data.subscribe((data: { heroes: Hero[] }) => {    this.heroes = data.heroes;
  });
}

3. Configure onSameUrlNavigation as 'reload'

4. Configure runGuardsAndResolvers as 'always'

runGuardsAndResolvers optional values: 'paramsChange', 'paramsOrQueryParamsChange', 'always'

{path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}, runGuardsAndResolvers: 'always'}

Time stamp

Add time parameters to Router:

<a (click)="gotoHeroes()">Heroes</a>

constructor(private router: Router) {
}

gotoHeroes() {  this.router.navigate(['/heroes'], {    queryParams: {refresh: new Date().getTime()}
  });
}

Then subscribe to queryParamMap in the component:

constructor(private heroService: HeroService, private route: ActivatedRoute) {
  this.route.queryParamMap.subscribe(params => {
    if (params.get('refresh')) {
      this.init();
    }
  });
}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to refresh the current page in Angular? Method introduction. For more information, please follow other related articles on the PHP Chinese website!