Angular Seitenaktualisierung

1. Installieren und importieren Sie einige Abhängigkeiten
2. Einen Button zum Aktualisieren der Seite in Angular erstellen

Als Single-Page-Anwendung erfordert Angular, dass die App standardmäßig aktualisiert wird, wenn neue Daten übergeben werden. Wir werden uns die beste Methode ansehen, um eine Seitenaktualisierung auf Angular durchzuführen.

Installieren und importieren Sie einige Abhängigkeiten

Zuerst müssen wir zu unserem Editor gehen, das Terminal am besten Visual Studio Code öffnen und die app-routing.module.ts mit der Funktion ng generate erstellen.

Dann führen wir den Befehl $ ng generate component home aus, wonach wir den Befehl $ ng generate component about ausführen.

Nachdem die Datei app-routing.module.ts erstellt wurde, öffnen wir ihre Datei und importieren die folgenden Komponenten.

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 }

];

Dadurch werden zwei Seiten mit separaten URLs erstellt, sodass Sie, wenn Sie zum Pfad /home gehen, zur Home-Komponente gelangen. die about-Komponente tut das Gleiche.

Während wir uns noch auf der Seite app-routing.ts befinden, codieren wir diese Befehle ein:

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

Einen Button zum Aktualisieren der Seite in Angular erstellen

Dann gehen wir zu app.component.html, um eine Schaltfläche zu erstellen:

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

Unser letzter Halt wird im Abschnitt app.component.ts sein, wo wir das nächste Code-Snippet übergeben. Aber zuerst müssen wir einige Funktionen importieren:

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

Dann führen wir diese Codes in der app.component.ts aus:

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

Die wahre Magie passiert mit der Funktion skipLocationChange. Wenn der Refresh-Button angeklickt wird, werden die Daten an die Seite weitergegeben, ohne dass die ganze Seite aktualisiert wird, so dass sie nicht einmal im Browserverlauf aufgezeichnet werden.