webentwicklung-frage-antwort-db.com.de

So aktualisieren Sie eine Komponente, ohne die ganze Seite zu aktualisieren - Angular

Meine Seitenstruktur ist:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Wie kann ich die Komponente app-header Aktualisieren/aktualisieren, ohne die gesamte Seite zu aktualisieren?

Ich möchte einen "Anmelden" -Link im Header ausblenden, nachdem sich der Benutzer erfolgreich angemeldet hat. Der Header ist in allen Komponenten/Routen gleich.

41
Aravinthan M

Angular aktualisiert eine Komponente automatisch, wenn eine Variablenänderung festgestellt wird.

Alles, was Sie tun müssen, um "zu aktualisieren", ist sicherzustellen, dass der Header einen Verweis auf die neuen Daten enthält. Dies kann über ein Abonnement innerhalb von header.component.ts Oder über eine @Input Variable erfolgen ...


ein Beispiel...

main.html

<app-header [header-data]="headerData"></app-header>

main.component.ts

public headerData:int = 0;

ngOnInit(){
    setInterval(()=>{this.headerData++;}, 250);
}

header.html

<p>{{data}}</p>

header.ts

@Input('header-data') data;

Im obigen Beispiel empfängt der Header alle 250 ms die neuen Daten und aktualisiert somit die Komponente.


Weitere Informationen zu Angulars Lebenszyklus-Hooks finden Sie unter: https://angular.io/guide/lifecycle-hooks

1
Zze