多次调用Angular Service单例构造函数
Posted
技术标签:
【中文标题】多次调用Angular Service单例构造函数【英文标题】:Angular Service singleton constructor called multiple times 【发布时间】:2019-01-01 07:41:09 【问题描述】:我正在尝试使用存储经过身份验证的用户详细信息的应用程序范围的服务 (UserService)。我已经设置了一些路由,但发现 UserService 是按路由实例化的。我希望他们共享相同的 UserService。
我创建了一个包含 TestService 作为提供者的 CoreModule 并将其导入 AppModule。
core.module.ts:
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import TestService from '../test.service';
@NgModule(
imports: [
CommonModule
],
declarations: [],
providers: [
TestService
]
)
export class CoreModule
test.service.ts:
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root'
)
export class TestService
constructor() console.log('testService constructor called');
app.module.ts
import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';
import FormsModule from '@angular/forms';
import AdminComponent from './layout/admin/admin.component';
import AppComponent from './app.component';
import AppRoutingModule from './app-routing.module';
import CoreModule from './core/core.module';
@NgModule(
declarations: [
AppComponent,
AdminComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
CoreModule
],
providers: [
],
bootstrap: [AppComponent]
)
export class AppModule
app-routing.module.ts
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import Routes, RouterModule from '@angular/router';
import BasicLoginComponent from './basic-login/basic-login.component';
import HttpClientModule from '@angular/common/http';
import AdminComponent from './layout/admin/admin.component';
const routes: Routes = [
path: '',
component: AdminComponent,
children: [
path: 'home',
loadChildren: './dashboard/dashboard.module#DashboardModule'
,
path: 'user/profile',
loadChildren: './user-profile/user-profile.module#UserProfileModule'
]
,
]
@NgModule(
imports: [
CommonModule,
RouterModule.forRoot(routes),
HttpClientModule
],
exports: [
[RouterModule]
],
declarations: []
)
export class AppRoutingModule
我已将 TestService 注入 DashboardComponent 和 UserProfileComponent 构造函数。但是,在其中两个组件之间进行路由时,会调用两次 TestService 构造函数。
它看起来很简单,但不知何故我不能把它弄好。谁能指出我解决此问题的正确方向?
*编辑
dashboard.component.ts
import AfterViewInit, Component, OnInit, ViewEncapsulation from '@angular/core';
/*import NotificationsService from 'angular2-notifications';*/
import UserService from '../user.service.js';
import LocalStorageService from '../../../node_modules/ngx-webstorage';
import TestService from '../test.service.js';
@Component(
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
encapsulation: ViewEncapsulation.None
)
export class DashboardComponent implements OnInit, AfterViewInit
constructor(private userService:UserService, private localSt:LocalStorageService,
private testService:TestService) // private servicePNotify: NotificationsService
ngOnInit()
用户配置文件组件.ts:
import Component, OnInit from '@angular/core';
import animate, style, transition, trigger from '@angular/animations';
import Http from '@angular/http';
import TestService from '../test.service';
@Component(
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: [
'./user-profile.component.scss',
'../../assets/icon/icofont/css/icofont.scss'
],
)
export class UserProfileComponent implements OnInit
constructor(public http: Http, private userService: UserService,
private testService:TestService)
ngOnInit()
【问题讨论】:
【参考方案1】:正如您已将 TestService 声明为 -
@Injectable(
providedIn: 'root'
)
这意味着您正在添加到 AppRoot 模块。
无需在CoreModule
中显式添加,因此请从CoreModule
的提供者中删除。删除以下 -
providers: [
TestService
]
当您在CoreModule
中添加TestSevice
时,RootModule
中已经添加了这就是它constructor
被多次调用的原因。
所以使用上面的任何一个。
【讨论】:
只是对 OP 的一些附加参考。 @eduPeeth 所说的被称为 Provider Scope 并且在官方 Angular 文档中有一个很好的清晰示例讨论它:Provider Scope @eduPeeth 嗨,我已经从 CoreModule 提供者中删除了 TestService 但仍然是同样的问题。这是控制台输出:imgur.com/a/s7JuLlU。构造函数似乎从 .ts 一次调用,从 .js 调用一次。这是什么意思? @daisura99 能否请您在使用此服务的地方提供您的组件代码。 @eduPeeth 我想我找到了问题所在。在我的仪表板组件中,我有这行import TestService from '../test.service.js';
...我的错误。非常感谢您的帮助,很抱歉浪费您的时间!
我只需要评论...我在整个互联网上寻找解决方案,以了解为什么我同时调用了 ts 和 js 文件并且单例服务没有保留在我的代码中。在阅读了@eduPeeth 的帖子后,搜索了我的代码并找到了对 .js 文件的引用。花了这么多愤怒的时间……无论如何,谢谢你的线索!【参考方案2】:
@Injectable(
providedIn: 'root'
)
providedIn
和 root
选项表示,该服务在整个应用程序中作为singleton
服务可用。
如果您没有添加到任何模块的提供者列表中,它不会报任何错误,例如 No provider for xxxservice
bcz of providedIn
。
如果您确实添加到列表中,将导致创建一个新的服务实例,这会给您带来超出预期的错误结果。
注意:请确保使用该概念以获得更好的结果。
【讨论】:
以上是关于多次调用Angular Service单例构造函数的主要内容,如果未能解决你的问题,请参考以下文章