Mise à jour (Angular 6 +)
La méthode recommandée pour créer un service singleton a changé. Il est maintenant recommandé de spécifier dans le @Injectable
décorateur sur le service qu'il doit être fourni dans la 'racine'. Cela a beaucoup de sens pour moi et il n'est plus du tout nécessaire de lister tous les services fournis dans vos modules. Vous importez simplement les services lorsque vous en avez besoin et ils s'enregistrent au bon endroit. Vous pouvez également spécifier un module afin qu'il ne soit fourni que si le module est importé.
@Injectable({
providedIn: 'root',
})
export class ApiService {
}
Mise à jour (Angular 2)
Avec NgModule, la façon de le faire maintenant, je pense, est de créer un 'CoreModule' avec votre classe de service à l'intérieur et de répertorier le service dans les fournisseurs du module. Ensuite, vous importez le module de base dans votre module d'application principal qui fournira une instance à tous les enfants qui demandent cette classe dans leurs constructeurs:
CoreModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiService } from './api.service';
@NgModule({
imports: [
CommonModule
],
exports: [ // components that we want to make available
],
declarations: [ // components for use in THIS module
],
providers: [ // singleton services
ApiService,
]
})
export class CoreModule { }
AppModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
@NgModule({
declarations: [ AppComponent ],
imports: [
CommonModule,
CoreModule // will provide ApiService
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Réponse originale
Si vous répertoriez un fournisseur dans bootstrap()
, vous n'avez pas besoin de le répertorier dans votre décorateur de composants:
import { ApiService } from '../core/api-service';
@Component({
selector: 'main-app',
templateUrl: '/views/main-app.html',
// DO NOT LIST PROVIDERS HERE IF THEY ARE IN bootstrap()!
// (unless you want a new instance)
//providers: [ApiService]
})
export class MainAppComponent {
constructor(private api: ApiService) {}
}
En fait, lister votre classe dans «fournisseurs» crée une nouvelle instance de celle-ci, si un composant parent la répertorie déjà, les enfants n'en ont pas besoin, et s'ils le font, ils obtiendront une nouvelle instance.
UserService
etFacebookService
àproviders
nulle part ailleurs?