Seite neu laden in Angular 2

1. Paginierungslogik in Angular 2
2. Installieren Sie die Abhängigkeiten für das Neuladen von Seiten in Angular
3. Verwenden Sie window.location.reload(), um die aktuelle Seite in Angular neu zu laden

In diesem Artikel erfahren Sie, wie Sie eine Seite in Angular 2 neu laden. Wir werden die Angular-CLI verwenden, um ein neues Projekt zu erstellen und die Abhängigkeiten zu installieren.

Am wichtigsten ist, dass wir die Methode window.location.reload() zum Neuladen der Seite verwenden. Schließlich werden wir Schaltflächen in HTML erstellen, damit wir das Konzept des Neuladens von Seiten in Angular 2 erleben können.

Paginierungslogik in Angular 2

Paginierung ist eine Technik, die verwendet wird, um Inhalte in Seiten zu unterteilen. Die Paginierungslogik entscheidet, welcher Inhalt auf welcher Seite erscheinen soll.

Dies kann mit einer Vielzahl von Methoden erfolgen, wie z.

1. Seitenzahlen
2. Seitengröße
3. Seitenzahl
4. Inhaltstyp

Die Paginierungslogik in Angular 2 basiert auf dem Konzept des Paging.

Installieren Sie die Abhängigkeiten für das Neuladen von Seiten in Angular

Angular ist ein clientseitiges MVC-Framework (Model View Controller), das eine deklarative, bidirektionale Datenbindung bietet, die dazu beiträgt, Boilerplate-Code zu reduzieren, und eine Entwicklungsplattform zum Erstellen mobiler und Desktop-Webanwendungen bietet.

Angular hat viele Abhängigkeiten, die erforderlich sind, damit das Neuladen von Seiten ordnungsgemäß funktioniert. Diese Abhängigkeiten sind RxJS, Zone.js, SystemJS, Browserify, Gulp, Karma und Protractor.

Führen Sie npm install von der Kommandozeile aus, um alle wesentlichen npm-Pakete nach Ihren Bedürfnissen zu installieren (wo sich die package.json befindet). Wir verwenden keine speziellen Abhängigkeiten; daher werden wir sie hier nicht angeben.

Verwenden Sie window.location.reload(), um die aktuelle Seite in Angular neu zu laden

Die beste Methode zum Neuladen der Seite in Angular ist window.location.reload().

Window.location.reload() ist eine JavaScript-API, die die aktuelle Seite im Browser neu lädt, was durch Aufrufen von window.location.reload() aufgerufen werden kann.

Diese API wird verwendet, um ein HTML-Dokument zu aktualisieren oder zu aktualisieren, ohne die gesamte Seite neu zu laden. Dies ist hilfreich für Web-Apps mit umfangreichen Inhalten und dynamischen Inhalten wie Nachrichtenseiten oder Blogs, bei denen Benutzer Aktualisierungen sehen möchten, ohne ihren Browser jedes Mal zu aktualisieren, wenn sie die Website auf ihrem mobilen Gerät besuchen (E-Mail-Clients, Social-Media-Websites).

Es ist auch nützlich, um aktualisierte Daten vom Server zu laden oder den Seiteninhalt zu aktualisieren, ohne ihn zu schließen und erneut zu öffnen. Es kann auch einige Probleme beim Laden externer Ressourcen oder Skripts beheben.

Darüber hinaus ist es ein weniger bekanntes Feature von Angular, da die meisten Entwickler es nicht kennen. Es ist jedoch sehr nützlich, wenn Sie Inhalte dynamisch in eine Liste oder Tabelle mit fester Länge laden müssen, wobei die Paginierung für die Größe des Darstellungsbereichs aktiviert ist.

[Klick hier um mehr zu erfahren.

Lassen Sie uns ein Beispiel besprechen, um zu verstehen, wie man window.location.reload() besser verwendet.

Der Code app.component.ts ist unten angegeben.

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

Der Code app.component.html ist unten angegeben.

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

In diesem Beispiel haben wir drei Seiten refresh, home und about erstellt; Mit Hilfe des oben erwähnten Nachladens haben wir ihnen die Funktionalität zum Nachladen gegeben. Zu guter Letzt haben wir ein Bootstrap-CSS-Stylesheet hinzugefügt, um es schick zu machen.

Sie können dieselbe Methode auch verwenden, um mehrere Seiten wie Google Pagination zu erstellen, wo Sie eine Seite neu laden können, ohne sich zu den anderen Seiten zu bewegen. Darüber hinaus ist dies eine sehr leichte Methode.

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.