web-dev-qa-db-fra.com

Angular Constructeur de service singleton appelé plusieurs fois

J'essaie d'utiliser un service à l'échelle de l'application (UserService) qui stocke les détails des utilisateurs authentifiés. J'ai configuré quelques itinéraires mais j'ai constaté que UserService est instancié par itinéraire. Je veux qu'ils partagent le même UserService.

J'ai créé un CoreModule contenant TestService en tant que fournisseur et l'ai importé dans 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 { }

J'ai injecté le TestService dans les constructeurs DashboardComponent et UserProfileComponent. Toutefois, lors du routage entre deux de ces composants, le constructeur TestService est appelé deux fois.

Cela semble si simple, mais je ne peux pas le faire correctement. Quelqu'un peut-il m'orienter dans la bonne direction pour résoudre ce problème?

* modifier

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

  }

}
angulartypescriptangular-servicesangular-routerangular-module
10
daisura99

Comme vous avez déclaré le TestService comme -

@Injectable({
  providedIn: 'root'
})

Ce qui signifie que vous ajoutez au module AppRoot.

Pas besoin d'ajouter explicitement dans le CoreModule, donc supprimez des fournisseurs de CoreModule. Supprimer ce qui suit -

providers: [
    TestService
  ]

Lorsque vous ajoutez le TestSevice dans CoreModule qui est déjà ajouté dans RootModule c'est la raison pour laquelle constructor est appelé plusieurs fois.

Utilisez donc l'un des deux ci-dessus.

20
eduPeeth