Ich arbeite an einem Angular-Projekt. Ich habe Probleme mit der Aktualisierungsaktion in einer Komponente.
Ich möchte die Komponenten des Routers aktualisieren, indem Sie auf die Schaltfläche klicken. Ich habe die Schaltfläche Aktualisieren, wenn Sie darauf klicken, dass die Komponente/der Router aktualisiert werden muss.
Ich habe window.location.reload()
und location.reload()
versucht, diese beiden sind für meine Bedürfnisse nicht geeignet. Bitte helfen Sie, wenn jemand davon weiß.
Nach einigen Recherchen und der Änderung meines Codes (siehe unten) funktionierte das Skript für mich. Ich habe gerade die Bedingung hinzugefügt:
this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));
Das Hinzufügen des Codes zum Konstruktor der erforderlichen Komponente funktionierte für mich.
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.mySubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Trick the Router into believing it's last link wasn't previously loaded
this.router.navigated = false;
}
});
Stellen Sie sicher, dass unsubscribe
von diesem mySubscription in ngOnDestroy()
abgerufen wird.
ngOnDestroy() {
if (this.mySubscription) {
this.mySubscription.unsubscribe();
}
}
In diesem Thread finden Sie weitere Informationen - https://github.com/angular/angular/issues/13831
Verwenden Sie die this.ngOnInit (); um dieselbe Komponente neu zu laden, statt die gesamte Seite neu zu laden !!
DeleteEmployee(id:number)
{
this.employeeService.deleteEmployee(id)
.subscribe(
(data) =>{
console.log(data);
this.ngOnInit();
}),
err => {
console.log("Error");
}
}
Glücklicherweise müssen Sie, wenn Sie Angular 5.1+ verwenden, keinen Hack mehr implementieren, da native Unterstützung hinzugefügt wurde. Sie müssen nur onSameUrlNavigation setzen, um in den RouterModule-Optionen neu zu laden:
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
exports: [RouterModule],
})
Weitere Informationen finden Sie hier: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
Dies kann über einen Hack erreicht werden. Navigieren Sie zu einer Beispielkomponente und navigieren Sie dann zu der Komponente, die Sie neu laden möchten.
this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
In meiner Anwendung habe ich eine Komponente, und alle Daten stammen von der API, die ich im Konstruktor von Component aufrufe. Es gibt eine Schaltfläche, mit der ich meine Seitendaten aktualisiere. Wenn Sie auf die Schaltfläche klicken, werden Daten im Backend gespeichert und Daten werden aktualisiert. So kann ich die Komponente - je nach Anforderung - nur neu laden/aktualisieren. Dies gilt nur für die Aktualisierung der Daten Code geschrieben im Konstruktor der Komponente.
kdo
// reload page hack methode
Push(uri: string) {
this.location.replaceState(uri) // force replace and no show change
await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
this.location.replaceState(uri) // replace
}
Eine andere Möglichkeit, eine Seite in Winkel 2 (auf harte Weise) zu aktualisieren sieht aus wie f5
import { Location } from '@angular/common';
constructor(private location: Location) {}
pageRefresh() {
location.reload();
}