Angular2 Global Service Provider

Question

In meiner Anwendung von Angular2 habe ich eine einfache Notwendigkeit, wo ich ausblenden Menüleiste basierend auf Login-Erfolg zeigen möchte. Dafür habe ich einen Dienst, der nur einen LoginSuccess boolean varilable, die ich auf Login-Komponente gesetzt würde und auf app.component.html für [hidden]=LoginSuccess nav-Tag verwenden.

Problem ich bin vor, auch nach app.global.service.ts durch constructor von app.component.ts & login.component.ts Wert Injektion nicht persistierende und jeder Konstruktor schafft neue Aufgabe app.global.service.ts.

Frage: Wie kann ich Einzelwert über Anwendung durch Service bestehen erzielen. Irgendwo in Angular2-Dokumenten habe ich gelesen, dass der injizierbare Dienst Singleton ist.

Answer 1

Sie sollten GlobalService bei Bootstrap zur Verfügung stellen und nicht für jede Komponente:

bootstrap(AppComponent, [GlobalService]) 

@Component({ 
    providers: [], // yes 
    // providers: [GlobalService], // NO. 
}) 
class AppComponent { 
    constructor(private gs: GlobalService) { 
    // gs is instance of GlobalService created at bootstrap 
    } 
} 

Auf diese Weise GlobalService wird ein Singleton sein.

Für anspruchsvollere Ansatz sehen this answer.

Answer 2

Als Saxsa, der Schlüsselpunkt ist die Service-Provider in der Anwendung Injektor und nicht an jeder Komponentenebene zu definieren. Achten Sie darauf, den Dienstanbieter nicht zweimal zu definieren ... Andernfalls haben Sie weiterhin separate Dienstinstanzen.

Auf diese Weise können Sie die gleiche Instanz des Dienstes teilen.

Dieses Verhalten tritt auf, weil der hierarchischen Injektoren von Angular2. Für weitere Informationen, können Sie einen Blick auf diese Frage:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

Ab endgültigen Freigabe (Angular 2.0.0):

Import der Service und injizieren es in den Anbietern Array wie folgt:

import { GlobalService } from './app.global.service'; 

//further down: 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
    // Your components should go here 
    ], 
    imports: [ 
    // Your module imports should go here 
    ], 
    providers: [ 
    ENV_PROVIDERS // By Angular 
    // Your providers should go here, i.e. 
    GlobalService 
    ] 
}); 

Answer 4

Sie sollten eine app.component.ts haben und statt boostrapping innerhalb von app.module.ts injizieren Sie den Service in app.component.ts.

... 
import { MusicService } from './Services/music-service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [MusicService], 
    ... 
}) 
export class AppComponent { 

constructor(private MS: MusicService) { 

} 
... 

Dies ist die aktuelle Angular2 Build basiert. So innen index.html sollten Sie <app-root>, wo AppComponent geladen wird.

Nun es in jeder anderen Komponente Gebrauch zu verwenden es nur importieren:

import { MusicService } from './Services/music-service'; 

und initialisieren:

constructor(private MS: MusicService) { 

} 

Zusammenfassung:

1. Import in app.component.ts
2. Insert in app.component.ts als ein provider
3. initialisieren in Konstruktor
4. Wiederholen Sie Schritt 2,3 für jede weitere Komponente verwenden wollen, es zu benutzen in

Referenz: Angular Dependency Injection

Answer 5

Ich will nur hinzufügen, weil ich an diesem festsaß Punkt, obwohl ich ein Singelton verwendet wird, müssen Sie auch die Winkel Routing-Strategie verwenden:

Sie können nicht href verwenden = „../ my-Route“

Ursache dieser startet die gesamte Anwendung neu:

stattdessen müssen Sie verwenden: Router = „../ my-Route“