![](/img/trans.png)
[英]How can I run an Async Function every time my Angular Service is hit?
[英]Service create every time - Angular
我只想創建服務 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 中有兩種方法可以使服務成為單例:
從文檔中, documentation
? 您需要在服務的 @Injectable 裝飾器中指定它應該在“根”中提供。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class GlobalStateService {
}
根據代碼看起來不錯,但是注意:用@Injectable({providedIn: 'root'})
裝飾它, do not provide it in any providers array.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.