Определить, если страница загружается, если компонент загружается впервые angular 6

Question

Привет, есть ли способ определить, был ли компонент загружен в первый раз в angular 6 Я хочу выполнить только вызов функции, если компонент загружен в первый раз, иначе покажут старые данные переменной

Answer 1

Возможно, вы можете использовать для этого sessionStorage или localStorage.

Примерно так:

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 имеет похожий API, но его хранилище более постоянное.

Answer 2

Объект localStorage хранит данные без срока годности. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год, а объект sessionStorage сохраняет данные только для одного сеанса (данные удаляются, когда вкладка браузера закрыто), поэтому вы не можете проверить, правильно ли выполнялся ваш компонент в первый раз, и значение переменной не очистится при следующем запуске вашего компонента. Я думаю, что лучше использовать глобальный сервис, потому что с каждым refre sh ваша переменная будет установлена. Ваш сервис может быть примерно таким:

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


}

// Ваш компонент

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;

  }
}

Answer 3

Хорошо. Каждый компонент angular имеет свой жизненный цикл. Таким образом, вы можете использовать каждый из этих методов жизненного цикла в соответствии с вашими требованиями.

Подробнее о официальной документации.

В вашем случае это будет конструктор или метод OnInit ().