Блог

Я хотел бы создать сервис только 1 раз.

Мой сервис вводится в 2 компонента, и я устанавливаю значение true. Проблема в том, что сервис создается всегда, когда я открываю представление с ним, и мое значение по умолчанию снова равно false. Как сделать его одноэлементным?

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

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

  constructor() {
    console.log('GlobalState created');
  }

  myValue = false;
}
  

и я использую его таким образом:

 @Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  model: any = {};
  permission: any;

  constructor(public authService: AuthService,
              private alertifyService: AlertifyService,
              private globalState: GlobalStateService) {
  }
  

модуль:

 import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {NavComponent} from './nav/nav.component';
import {AuthService} from './_services/auth.service';
import {HomeComponent} from './home/home.component';
import {RegisterComponent} from './register/register.component';
import {AlertifyService} from './_services/alertify.service';
import { SettingsComponent } from './settings/settings.component';
import { BooksComponent } from './books/books.component';
import { UsersComponent } from './users/users.component';
import { GlobalStateService } from './_services/global-state.service';
import { StoreModule } from '@ngrx/store';
import { changeTabReducer } from './reducers/tab.reducer';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    HomeComponent,
    RegisterComponent,
    SettingsComponent,
    BooksComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [
    AuthService,
    AlertifyService,
    GlobalStateService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
  

Есть два способа сделать сервис одноэлементным в Angular:

1. Объявите, что сервис должен предоставляться в корне приложения.
2. Включите сервис в AppModule или в модуль, который импортируется только AppModule.

Из документов, documentation ? Вам нужно указать в @Injectable декораторе сервиса, что он должен быть предоставлен в «корне».

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

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

Который выглядит хорошо на основе кода, однако ОБРАТИТЕ ВНИМАНИЕ: украсьте его @Injectable({providedIn: 'root'}) и do not provide it in any providers array.