Détecter si la page si le composant est chargé pour la première fois angulaire 6

Vous pouvez probablement utiliser sessionStorage ou localStorage pour cela.

Quelque chose comme ça:

ngOnInit() {
  if (sessionStorage.getItem('yourComponentNameLoadedAlready')) {
    // branch that this component has already been loaded
  } else { 
    // branch that this component is loading for the first time, set the session storage key to 'yes' to tell you this component has already loaded.
    sessionStorage.setItem('yourComponentNameLoadedAlready', 'yes');
   // continue doing what you want to do for first time load.
  }
}

https://developer.mozilla.org/en-US/docs / Web / API / Window / sessionStorage

localStorage a une API similaire mais son stockage est plus permanent.

Eh bien. Chaque composant angulaire a un cycle de vie. Ainsi, vous pouvez utiliser chacune de ces méthodes de cycle de vie en fonction de vos besoins.

Pour en savoir plus, consultez la documentation officielle.

Dans votre cas, ce serait le constructeur ou la méthode OnInit ().

L'objet localStorage stocke des données sans date d'expiration. Les données ne seront pas supprimées à la fermeture du navigateur, et seront disponibles le jour, la semaine ou l'année suivant et l'objet sessionStorage stocke les données pour une seule session (les données sont supprimées lorsque l'onglet du navigateur est fermé), vous ne pouvez donc pas vérifier correctement si votre composant s'est exécuté pour la première fois et la valeur de variable ne s'effacera pas la prochaine fois que votre composant s'exécutera. Je pense qu'il est préférable d'utiliser un service global car à chaque actualisation, votre variable serait définie. Votre service peut être quelque chose comme ceci:

constructor (private globalSettingsService:GlobalSettingsService){ 
  }

  ngOnInit() {
  if (this.globalSettingsService.YourComponentNameLoadedAlready) {
    //This component has already been executed

  } else { 
     //This is the first time that this component executes
     this.globalSettingsService.YourComponentNameLoadedAlready=true;

  }
}

// Votre composant

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

@Injectable({
  providedIn: 'root'
})
export class GlobalSettingsService {

  private _yourComponentNameLoadedAlready:boolean;

  constructor() { }


  public set YourComponentNameLoadedAlready(v : boolean) {
    this._yourComponentNameLoadedAlready= v;
  }

  public get YourComponentNameLoadedAlready() : boolean {
    return this._yourComponentNameLoadedAlready;
  }


}