javascript - 每次都创建服务 - Angular
问题描述
我只想创建一次服务。
我的服务被注入到 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 中有两种方法可以使服务成为单例:
- 声明应在应用程序根目录中提供服务。
- 将服务包含在 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.
推荐阅读
- vue.js - djoser 如何在 django rest 中制作 jwt
- makefile - 如何配置 GNU Make 以将导出的变量传递给 shell 函数?
- ruby - Ruby 中的浮点值是立即数吗?
- python - Flask 400 错误请求
- python - 无法打开 json 文件
- c# - 如何给每个动态按钮创建自己的事件
- amazon-web-services - 当我尝试发送电子邮件时,Amazon SES 抛出错误 500
- python - 如何在 python 中使用 selenium 在 https://in.indeed.com/ 网站中单击 Continue 按钮?
- python - 播放音乐的问题 Discord.py
- javascript - 当我单击具有 onclick 属性的元素时如何触发另一个功能