Comment actualiser la page actuelle dans Angular ? Présentation de la méthode

Cet article partagera avec vous plusieurs façons angulaires d'actualiser la page actuelle. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Plusieurs façons pour Angular d'actualiser la page actuelle

---

Par défaut, lorsqu'une demande de navigation vers la page actuelle L'URL est reçue, le routeur angulaire l'ignorera.

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

En cliquant plusieurs fois sur le même lien, la page ne s'actualisera pas.

L'attribut onSameUrlNavigation est fourni à partir d'Angular 5.1 et prend en charge le rechargement des itinéraires.

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

onSameUrlNavigation a deux valeurs facultatives : 'reload' et 'ignore', la valeur par défaut est 'ignore'. Mais le simple fait de changer onSameUrlNavigation en 'reload' déclenchera uniquement l'événement RouterEvent et la page ne sera pas rechargée. D'autres méthodes doivent être utilisées. Avant de continuer, nous activons Router Trace et vérifions le journal des événements de routage depuis la console du navigateur :

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

Vous pouvez voir que lorsque onSameUrlNavigation n'est pas configuré, cliquer à nouveau sur le même lien n'affichera pas le journal Configurer onSameUrlNavigation comme '. reload ', un journal sera généré, comprenant les événements : NavigationStart, RoutesRecognized, GuardsCheckStart, GuardsCheckEnd, ActivationEnd, NavigationEnd, etc.

Tutoriels associés recommandés : "tutoriel angulaire"

Ce qui suit présente plusieurs méthodes pour actualiser la page actuelle :

NavigationEnd

1. Configurez onSameUrlNavigation comme 'reload'

2. Écoutez l'événement NavigationEnd

Abonnez-vous à l'événement de routeur, rechargez les données dans NavigationEnd et détruisez le composant Désabonnement :

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();
    }
  }
  ...
}

Cette méthode permet de configurer la page pour qu'elle soit actualisée selon les besoins, mais le code est fastidieux.

RouteReuseStrategy

1. Configurez onSameUrlNavigation comme 'reload'

2. Personnalisez RouteReuseStrategy et ne réutilisez pas Route

Il existe deux façons de l'implémenter :

Changer la stratégie dans le code :

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

Angular applique Router en tant qu'objet singleton, donc en utilisant cette méthode, changer la stratégie dans un composant affectera les autres composant, mais le routeur sera réinitialisé après avoir actualisé la page à partir du navigateur, ce qui peut facilement prêter à confusion et n'est pas recommandé.

Custom 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;
  }

}

Utiliser une RouteReuseStrategy personnalisée :

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

Cette méthode peut implémenter une stratégie de réutilisation de route plus complexe.

Resolve

Utilisez Resolve pour obtenir les données du serveur à l'avance, afin que les données soient prêtes avant l'activation de l'itinéraire.

1. Implémenter ResolverService

Transférer le code d'initialisation dans le composant vers 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();
  }
}

Configurer la résolution pour le routage :

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

2. Code, modifiez pour obtenir les données de la résolution

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

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

3. Configurez onSameUrlNavigation comme 'reload'

4. Configurez runGuardsAndResolvers comme 'toujours'

runGuardsAndResolvers. valeurs facultatives : 'paramsChange', 'paramsOrQueryParamsChange', 'always'

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

Timestamp

Ajouter des paramètres d'heure au routeur :

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

constructor(private router: Router) {
}

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

Ensuite, abonnez-vous à queryParamMap dans le composant :

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

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!