Recargar página en Angular 2

1. Lógica de paginación en Angular 2
2. Instale las dependencias para la recarga de página en Angular
3. Use window.location.reload() para recargar la página actual en Angular

Este artículo aprenderá a recargar una página en Angular 2. Usaremos la CLI de Angular para crear un nuevo proyecto e instalar las dependencias.

Lo más importante es que usaremos el método window.location.reload() para recargar la página. Finalmente, haremos botones en HTML para que podamos experimentar el concepto de recarga de página en Angular 2.

Lógica de paginación en Angular 2

La paginación es una técnica que se utiliza para dividir el contenido en páginas. La lógica de paginación es decidir qué contenido debe estar en qué página.

Se puede hacer usando una variedad de métodos, tales como:

1. Números de página
2. Tamaño de página
3. Número de páginas
4. Tipo de contenido

La lógica de paginación en Angular 2 se basa en el concepto de paginación.

Instale las dependencias para la recarga de página en Angular

Angular es un marco MVC (Controlador de vista de modelo) del lado del cliente que ofrece un enlace de datos bidireccional declarativo que ayuda a reducir el código repetitivo y proporciona una plataforma de desarrollo para crear aplicaciones web móviles y de escritorio.

Angular tiene muchas dependencias que son necesarias para que la recarga de la página funcione correctamente. Estas dependencias son RxJS, Zone.js, SystemJS, Browserify, Gulp, Karma y Protractor.

Ejecute npm install desde la línea de comandos para instalar todos los paquetes npm esenciales según sus necesidades (donde se encuentra el package.json). No usamos dependencias especiales; por lo tanto, no los especificaremos aquí.

Use window.location.reload() para recargar la página actual en Angular

El mejor método para recargar la página en Angular es window.location.reload().

Window.location.reload() es una API de JavaScript que recarga la página actual en el navegador, que se puede invocar llamando a window.location.reload().

Esta API se utiliza para refrescar o actualizar un documento HTML sin recargar toda la página. Es útil para las aplicaciones web con mucho contenido y contenido dinámico, como sitios de noticias o blogs, donde los usuarios pueden querer ver actualizaciones sin actualizar su navegador cada vez que visitan el sitio en su dispositivo móvil (clientes de correo electrónico, sitios de redes sociales).

También es útil para cargar datos actualizados del servidor o refrescar el contenido de la página sin cerrarla y volver a abrirla. También puede solucionar algunos problemas con la carga de scripts o recursos externos.

Además, es una característica menos conocida de Angular porque la mayoría de los desarrolladores no la conocen. Aunque, es muy útil cuando necesita cargar contenido dinámicamente en una lista o tabla de longitud fija con la paginación habilitada en el tamaño de la ventana gráfica.

[Clic aquí para saber más.

Analicemos un ejemplo para entender cómo usar mejor window.location.reload().

El código app.component.ts se proporciona a continuación.

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  Home(): void {
    window.location.reload();
}
About(): void {
  window.location.reload();
}
Contact(): void {
  window.location.reload();
}
Services(): void {
  window.location.reload();
}
Goods(): void {
  window.location.reload();
}
}

El código app.component.html se proporciona a continuación.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h3>Example of Page Reload in Angular 2</h3>
<h6>Press the given below buttons to check the live demonstration of page reloading in Angular</h6>
<div> <button (click)="Home()">Home</button></div>
<br>
<br>
<div> <button (click)="About()">About</button> </div>
<br>
<br>
<div> <button (click)="Contact()">Contact</button> </div>
<br>
<br>
<div> <button (click)="Services()">Services</button> </div>
<br>
<br>
<div> <button (click)="Goods()">Goods</button> </div>

En este ejemplo, creamos tres páginas refresh, home, y about; con la ayuda de la recarga mencionada anteriormente, les dimos la funcionalidad de recargar. Por último, hemos agregado una hoja de estilo Bootstrap CSS para que sea elegante.

También puede usar este mismo método para crear varias páginas como Google Pagination, donde puede volver a cargar una página sin moverse hacia las otras páginas. Además, este es un método muy ligero, utilícelo.

Haga clic aquí para ver la demostración en vivo del código anterior.