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

Question

我正在尝试使用存储经过身份验证的用户详细信息的应用范围服务 (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 { }

应用-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() {

  }

}

用户个人资料-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

正如您将 TestService 声明为 -

@Injectable({
  providedIn: 'root'
})

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

无需在 CoreModule 中明确添加，因此从 CoreModule 的提供者中移除。删除以下 -

providers: [
    TestService
  ]

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

所以使用上面的任何一个。

Answer 2

@Injectable({ providedIn: 'root' })

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

NOTE : Please make sure to use the concept for better results.

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

Angular Service singleton constructor called multiple times

typescript

angular-services

angular-module

angular

angular-router