Refresco de página en Angular

1. Instalar e importar algunas dependencias
2. Crear un botón para actualizar la página en Angular

Al ser una aplicación de una sola página, Angular requiere que la aplicación se actualice de forma predeterminada cuando se pasan nuevos datos. Veremos el mejor método para hacer una actualización de página en Angular.

Instalar e importar algunas dependencias

Primero, tendremos que dirigirnos a nuestro editor, abrir la terminal preferiblemente Visual Studio Code y crear el app-routing.module.ts usando la función ng generate.

A continuación, ejecutamos el comando $ ng generate component home, tras lo cual ejecutamos el comando $ ng generate component about.

Después de crear el archivo app-routing.module.ts, abrimos su archivo e importamos los siguientes componentes.

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 }

];

Esto crea dos páginas con URL separadas, de modo que si se dirige a la ruta /home, lo lleva al componente de inicio; el componente about hace lo mismo.

Mientras aún estamos en la página app-routing.ts, codificamos estos comandos:

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

Crear un botón para actualizar la página en Angular

Luego nos dirigimos a app.component.html para crear un botón:

<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>

Nuestra última parada será en la sección app.component.ts, donde pasaremos el siguiente fragmento de código. Pero primero, tenemos que importar algunas funciones:

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

Luego ejecutamos estos códigos en el 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 verdadera magia ocurre con la función skipLocationChange. Cuando se hace clic en el botón Actualizar, los datos pasan a la página sin actualizar toda la página, de modo que ni siquiera se registran en el historial del navegador.