角度服务单例构造函数多次调用

Question

我正在尝试使用存储经过身份验证的用户详细信息的应用程序范围的服务(用户服务)。我已经设置了一些路由，但发现用户服务是按路由实例化的。我希望他们共享相同的用户服务。

我创建了一个包含TestService作为提供程序的核心模块，并将其导入到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() {
}
}

user-profile-component.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() {
}
}

Answer 1

正如您声明的测试服务为 -

@Injectable({
providedIn: 'root'
})

这意味着您正在添加到 AppRoot 模块。

无需在CoreModule中显式添加，因此请从CoreModule的提供者中删除。删除以下内容 -

providers: [
TestService
]

当您在CoreModule中添加TestSevice时，该RootModule中已经添加，这就是它constructor多次调用的原因。

因此，请使用上面的任何一个。

Answer 2

@Injectable({ providedIn: 'root' })

• 带有root选项的providedIn意味着该服务在整个应用程序中作为singleton服务可用。
• 如果您没有添加到任何模块的提供程序列表中，它不会像providedInNo provider for xxxservicebcz 那样抱怨任何错误。
• 如果您确实添加到列表中将导致创建一个新的服务实例，这将给您带来比预期错误的结果。

注意：请确保使用该概念以获得更好的结果。