Confusing Angular 2+ Module, Exporte und Dienste - wie mehrere Instanzen von gemeinsamen/wiederverwendbaren Service zu vermeiden

Question

Gegeben import { HttpModule } from '@angular/http';, die ich in meine Hauptanwendungsmodul (BrowserModule) importieren, und vorausgesetzt, dass in der Anwendung ich DI Http Service alle über den Platz, was passiert, wenn:

• Ich verwende ein anderes Modul z Ich habe ein Feature-Modul oder ich habe npm Paket heruntergeladen haben, nennen wir es CoolFeaturesModule
• CoolFeaturesModule selbst HttpModule und Injizieren Http Service

Was importiert, wie ich sie ausarbeiten, wird jedes Modul seine eigene Injektor haben und für jeden Injektor wird ein Http Service Provider registriert. Als Ergebnis werde ich mehrere Instanzen von Http Service haben. Ist das korrekt?

Answer 1

Es werden mehrere Instanzen von Services basierend auf angular.io docs

Abhängigkeiten sind Singletons im Rahmen eines Injektors sein. Eine Anwendung kann mehrere Injektoren haben. Eine Angular-Anwendung ist ein Baum von Komponenten. Jede Komponenteninstanz hat ihren eigenen Injektor. Der Komponentenbaum ist parallel zum Injektorbaum aufgebaut.

Answer 2

Wie bereits erwähnt, sind inbetables nur Singleton, wenn sie im Abhängigkeitsinjektionsbaum verfügbar sind. Wenn injizierbare Materialien verwendet werden, prüft die Komponente zuerst ihr Abhängigkeits-Array, falls sie gefunden wird, verwendet sie es. Wenn nicht, klettert es bis zum oberen Baum bis AppModule. In dieser Konidition, wie Sie sehen können, wenn Komponenten/Module Geschwister sind (oder nicht nur irgendwie gegenseitig geerbt) und wenn sie ihren eigenen HttpService bereitstellen, werden sie separat initialisieren.

Wenn Sie jedoch kein Lazy Loading verwenden, werden alle Ihre Dienste bereits von Ihrem Hauptmodul erkannt. In jedem Fall werden Ihre Dienste global und damit Singleton sein.

https://plnkr.co/edit/JpEDf1pxO95knVUQLwdE?p=preview

import {Component, NgModule, VERSION,Injectable} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 
    import {HttpModule,Http} from "@angular/http"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 


@Injectable() 
export class CustomHttpService{ 
    constructor(protected http: Http){ 

    } 
} 

@NgModule({ 
    imports:[HttpModule] 
    providers:[CustomHttpService] 
}) 
export class CustomHttpModule{} 



@NgModule({ 
    imports: [ BrowserModule,CustomHttpModule], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}