Comment mettre à jour un composant sans actualiser la page entière - Angular

Ma structure de la Page est:

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

Comment puis-je mettre à jour/actualiser les app-header composant, sans actualiser la page entière?

Je veux cacher un "Sign-In" dans l'en-tête, une fois que l'utilisateur a réussi à se connecter. L'en-tête est commun à tous les composants/routes.

source d'informationauteur Aravinthan M

Vous pouvez utiliser un BehaviorSubject pour la communication au sein des différents composants tout au long de l'application. Vous pouvez définir un service de partage de données contenant les BehaviorSubject à laquelle vous pouvez souscrire et à émettre des changements.

Définir un partage des données de service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}

Ajouter le DataSharingService dans votre AppModule fournisseurs d'entrée.

Ensuite, importez les DataSharingService dans votre <app-header> et dans le composant où vous effectuez le signe de l'opération. Dans <app-header> abonnez-vous à la modification de isUserLoggedIn sujet:

import { DataSharingService } from './data-sharing.service';

export class AppHeaderComponent { 
    //Define a variable to use for showing/hiding the Login button
    isUserLoggedIn: boolean;

    constructor(private dataSharingService: DataSharingService) {

        //Subscribe here, this will automatically update 
        //"isUserLoggedIn" whenever a change to the subject is made.
        this.dataSharingService.isUserLoggedIn.subscribe( value => {
            this.isUserLoggedIn = value;
        });
    }
}

Dans votre <app-header> modèle html, vous devez ajouter le *ngIf condition par exemple:

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button>

Enfin, vous avez juste besoin d'émettre l'événement une fois que l'utilisateur s'est connecté.e.g:

someMethodThatPerformsUserLogin() {
    //Some code 
    //.....
    //After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}

1

Angulaire sera automatiquement mise à jour d'un composant lorsqu'il détecte un changement de variable .

De sorte que tous vous avez à faire pour "actualiser" est de s'assurer que l'en-tête a une référence pour les nouvelles données. Ce pourrait être par l'intermédiaire d'un abonnement dans un délai de header.component.ts ou par l'intermédiaire d'un @Input variable...

un exemple...

main.html
```
<app-header [header-data]="headerData"></app-header>
```
principal.composante.ts
```
public headerData:int = 0;

ngOnInit(){
    setInterval(()=>{this.headerData++;}, 250);
}
```
header.html
```
<p>{{data}}</p>
```
en-tête.ts
```
@Input('header-data') data;
```
Dans l'exemple ci-dessus, l'en-tête recevrez les nouvelles données toutes les 250ms et ainsi mettre à jour le composant.

Pour plus d'informations sur Angulaire du cycle de vie des crochets, voir: https://angular.io/guide/lifecycle-hooks

L'une des nombreuses solutions est de créer un @Injectable() classe qui contient les données que vous voulez afficher dans l'en-tête. D'autres composants peuvent également accéder à cette classe et de modifier ces données, de manière efficace de changer l'en-tête.

Une autre option est de mettre en place @Input() variables et @Output() EventEmitters que vous pouvez utiliser pour modifier les données d'en-tête.

Modifier Exemples comme vous l'avez demandé:

@Injectable()
export class HeaderService {
    private _data;
    set data(value) {
        this._data = value;
    }
    get data() {
        return this._data;
    }
}

dans d'autres composant:

constructor(private headerService: HeaderService) {}

//Somewhere
this.headerService.data = 'abc';

dans l'en-tête de la composante:

let headerData;

constructor(private headerService: HeaderService) {
    this.headerData = this.headerService.data;
}

Je n'ai pas réellement essayé. Si les get/set ne fonctionne pas, vous pouvez le modifier pour utiliser un Objet();

//Simple Subject() example:
let subject = new Subject();
this.subject.subscribe(response => {
  console.log(response); //Logs 'hello'
});
this.subject.next('hello');

De composant mise à jour du

 @Injectable()
    export class LoginService{
    private isUserLoggedIn: boolean = false;

    public setLoggedInUser(flag) { //you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then
    this.isUserLoggedIn= flag;
    }


public getUserLoggedIn(): boolean {
return this.isUserLoggedIn;
}

Login Component ts
            Login Component{
             constructor(public service: LoginService){}

public login(){
service.setLoggedInUser(true);
}
            }
Inside Header component

 Header Component ts
        HeaderComponent {
         constructor(public service: LoginService){}

         public getUserLoggedIn(): boolean { return this.service.getUserLoggedIn()}
        }

template of header component: Check for user sign in here

<button *ngIf="getUserLoggedIn()">Sign Out</button>
<button *ngIf="!getUserLoggedIn()">Sign In</button>

Vous pouvez utiliser de nombreuses approche comme afficher, de masquer à l'aide de ngIf

App Component ts
AppComponent {
 public showHeader: boolean = true;
}
App Component html
<div *ngIf='showHeader'> //you show hide on basis of this ngIf and header component always get visible with it's lifecycle hook ngOnInit() called all the time when it get visible
<app-header></app-header>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>

Vous pouvez également utiliser les services de

@Injectable()
export class AppService {
private showHeader: boolean = false;

public setHeader(flag) { //you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then
this.showHeader = flag;
}

public getHeader(): boolean {
return this.showHeader;
}
}

App Component.ts
    AppComponent {
     constructor(public service: AppService){}
    }

App Component.html
    <div *ngIf='service.showHeader'> //you show hide on basis of this ngIf and header component always get visible with it's lifecycle hook ngOnInit() called all the time when it get visible
    <app-header></app-header>
    </div>
    <router-outlet></router-outlet>
    <app-footer></app-footer>

Vous devez vous connecter pour publier un commentaire.