Rafraîchissement de page en Angular

1. Installer et importer certaines dépendances
2. Créer un bouton pour actualiser la page dans Angular

Étant une application d’une seule page, Angular nécessite que l’application soit actualisée par défaut lorsque de nouvelles données sont transmises. Nous allons voir la meilleure méthode pour faire un rafraîchissement de page sur Angular.

Installer et importer certaines dépendances

Tout d’abord, nous devrons nous diriger vers notre éditeur, ouvrir le terminal de préférence Visual Studio Code et créer le app-routing.module.ts à l’aide de la fonction ng generate.

Ensuite, nous exécutons la commande $ ng generate component home, après quoi nous exécutons la commande $ ng generate component about.

Une fois le fichier app-routing.module.ts créé, nous ouvrons son fichier et importons les composants suivants.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
Next, add the routes as follows:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }

];

Cela crée deux pages avec des URL distinctes, de sorte que si vous vous dirigez vers le chemin /home, cela vous amène au composant home; le composant about fait de même.

Toujours dans la page app-routing.ts, nous codons ces commandes :

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Créer un bouton pour actualiser la page dans Angular

Ensuite on se dirige vers le app.component.html pour créer un bouton :

<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
    <a routerLink="/test" >Test</a>
    <button type="button" (click)="refresh()" >
        Refresh
    </button>
</div>

<router-outlet></router-outlet>

Notre dernier arrêt sera dans la section app.component.ts où nous passons le prochain extrait de codes. Mais d’abord, nous devons importer certaines fonctions :

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

Puis on lance ces codes dans le app.component.ts :

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'refreshPage';
	constructor(public _router: Router, public _location: Location) { }
	refresh(): void {
		this._router.navigateByUrl("/refresh", { skipLocationChange: true }).then(() => {
		console.log(decodeURI(this._location.path()));
		this._router.navigate([decodeURI(this._location.path())]);
		});
	}
}

La vraie magie opère avec la fonction skipLocationChange. Lorsque le bouton d’actualisation est cliqué, les données sont transmises sur la page sans actualiser toute la page, de sorte qu’elles ne sont même pas enregistrées dans l’historique du navigateur.