Блог

Я пытаюсь создать службу, которая содержит переменные, которые мое веб-приложение Angular разделяет между компонентами (компоненты, которые могут считывать и записывать в эти переменные). Из-за этого мне нужно, чтобы это была одноэлементная служба, но мне не повезло, так как с каждым новым компонентом создается новый экземпляр.

Служба (GlobalService) объявляется следующим образом:

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

@Injectable({
  providedIn: 'root',
})

export class GlobalService {

  currentUser: string = null;
  currentProject: string = null;
  currentProjectName: string = null;
  canEditInProject: boolean = null;

  constructor() {
    console.log('in global service constructor');
  }
  

с методами getter и setter, определенными после.

В app.module.ts у меня есть следующее:

 @NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule,
    FlexLayoutModule,
    RouterModule.forRoot([]),
    LayoutModule,
    MDBBootstrapModule.forRoot(),
    BrowserAnimationsModule,
    HttpClientModule,
  ],
  providers: [GlobalService],
  bootstrap: [AppComponent]
})
  

где он объявлен в providers . Я искал свой проект, и в службе нет других операторов поставщика.

Каждый компонент, который его использует (1), имеет оператор импорта сверху, а затем (2) объявляет закрытую переменную в своем конструкторе, например:

 constructor(private globalService: GlobalService)
  

и использует переменную this.globalService для получения или установки служебных переменных.

Тем не менее, при каждой новой загрузке страницы я вижу из своего оператора печати в global.service.ts, что вызывается конструктор и создается новый экземпляр. Тогда, конечно, все мои переменные равны нулю, и ничего не сохраняется.

Есть идеи, что происходит не так? Или какие-либо другие идеи решения? Раньше я пробовал использовать localStorage и sessionStorage, но там тоже была некоторая нестабильность…. Я в тупике