Wie erstelle ich einen Singleton-Dienst in Angular 2?

Ich habe gelesen, dass beim Injizieren beim Bootstrapping alle untergeordneten Elemente dieselbe Instanz verwenden sollten, aber meine Haupt- und Header-Komponenten (Haupt-App enthält Header-Komponente und Router-Outlet) erhalten jeweils eine separate Instanz meiner Dienste.

Ich habe einen FacebookService, mit dem ich die Facebook-Javascript-API anrufe, und einen UserService, der den FacebookService verwendet. Hier ist mein Bootstrap:

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

Aus meiner Protokollierung geht hervor, dass der Bootstrap-Aufruf beendet ist. Dann wird der FacebookService und dann der UserService erstellt, bevor der Code in jedem der Konstruktoren ausgeführt wird, die MainAppComponent, die HeaderComponent und die DefaultComponent:

Jason hat vollkommen recht! Dies wird durch die Funktionsweise der Abhängigkeitsinjektion verursacht. Es basiert auf hierarchischen Injektoren.

In einer Angular2-Anwendung gibt es mehrere Injektoren:

• Der Root, den Sie beim Bootstrapping Ihrer Anwendung konfigurieren
• Ein Injektor pro Komponente. Wenn Sie eine Komponente in einer anderen verwenden. Der Komponenteninjektor ist ein untergeordnetes Element der übergeordneten Komponente. Die Anwendungskomponente (die Sie beim Boostrapping Ihrer Anwendung angeben) hat den Root-Injektor als übergeordneten.

Wenn Angular2 versucht, etwas in den Komponentenkonstruktor einzufügen:

• Es untersucht den der Komponente zugeordneten Injektor. Wenn es eine übereinstimmende gibt, wird sie verwendet, um die entsprechende Instanz abzurufen. Diese Instanz wird träge erstellt und ist ein Singleton für diesen Injektor.
• Wenn es auf dieser Ebene keinen Anbieter gibt, wird der übergeordnete Injektor (usw.) überprüft.

Wenn Sie also einen Singleton für die gesamte Anwendung haben möchten, muss der Anbieter entweder auf der Ebene des Root-Injektors oder des Injektors der Anwendungskomponente definiert sein.

Aber Angular2 wird den Injektorbaum von unten betrachten. Dies bedeutet, dass der Anbieter auf der untersten Ebene verwendet wird und der Bereich der zugeordneten Instanz diese Ebene ist.

Siehe diese Frage für weitere Details:

• Was ist der beste Weg, um einen Dienst in Winkel 2 (Beta) in einen anderen zu injizieren?

Update (Winkel 6 +)

Die empfohlene Methode zum Erstellen eines Singleton-Dienstes wurde geändert. Es wird jetzt empfohlen, im @InjectableDekorator des Dienstes anzugeben, dass er im 'root' bereitgestellt werden soll. Dies ist für mich sehr sinnvoll und es besteht keine Notwendigkeit mehr, alle bereitgestellten Dienste in Ihren Modulen aufzulisten. Sie importieren die Dienste nur dann, wenn Sie sie benötigen, und sie registrieren sich an der richtigen Stelle. Sie können auch ein Modul angeben, damit es nur bereitgestellt wird, wenn das Modul importiert wird.

@Injectable({
  providedIn: 'root',
})
export class ApiService {
}

• https://angular.io/guide/singleton-services
• https://angular.io/guide/providers

Update (Winkel 2)

Mit NgModule besteht die Möglichkeit, dies jetzt zu tun, darin, ein 'CoreModule' mit Ihrer Serviceklasse darin zu erstellen und den Service bei den Anbietern des Moduls aufzulisten. Anschließend importieren Sie das Kernmodul in Ihr Haupt-App-Modul, das allen Kindern, die diese Klasse in ihren Konstruktoren anfordern, die eine Instanz bereitstellt:

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 { }

Ursprüngliche Antwort

Wenn Sie einen Anbieter in auflisten bootstrap(), müssen Sie ihn nicht in Ihrem Komponentendekorator auflisten:

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

Wenn Sie Ihre Klasse in "Provider" auflisten, wird eine neue Instanz davon erstellt. Wenn eine übergeordnete Komponente sie bereits auflistet, müssen die untergeordneten Komponenten dies nicht tun. In diesem Fall erhalten sie eine neue Instanz.

Ich weiß, dass Angular hierarchische Injektoren hat, wie Thierry sagte.

Aber ich habe hier eine andere Option, falls Sie einen Anwendungsfall finden, bei dem Sie ihn dem Elternteil nicht wirklich injizieren möchten.

Wir können dies erreichen, indem wir eine Instanz des Dienstes erstellen und diese bei Bereitstellung immer zurückgeben.

import { provide, Injectable } from '@angular/core';
import { Http } from '@angular/core'; //Dummy example of dependencies

@Injectable()
export class YourService {
  private static instance: YourService = null;

  // Return the instance of the service
  public static getInstance(http: Http): YourService {
    if (YourService.instance === null) {
       YourService.instance = new YourService(http);
    }
    return YourService.instance;
  }

  constructor(private http: Http) {}
}

export const YOUR_SERVICE_PROVIDER = [
  provide(YourService, {
    deps: [Http],
    useFactory: (http: Http): YourService => {
      return YourService.getInstance(http);
    }
  })
];

Und dann verwenden Sie für Ihre Komponente Ihre benutzerdefinierte Bereitstellungsmethode.

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

Und Sie sollten einen Singleton-Service haben, ohne von den hierarchischen Injektoren abhängig zu sein.

Ich sage nicht, dass dies ein besserer Weg ist, nur für den Fall, dass jemand ein Problem hat, bei dem hierarchische Injektoren nicht möglich sind.

Die Syntax wurde geändert. Überprüfen Sie diesen Link

Abhängigkeiten sind Singletons im Rahmen eines Injektors. Im folgenden Beispiel wird eine einzelne HeroService-Instanz von der HeroesComponent und ihren untergeordneten HeroListComponent-Instanzen gemeinsam genutzt.

Schritt 1. Erstellen Sie eine Singleton-Klasse mit @Injectable Decorator

@Injectable()
export class HeroService {
  getHeroes() { return HEROES;  }
}

Schritt 2. In den Konstruktor injizieren

export class HeroListComponent { 
  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }

Schritt 3. Anbieter registrieren

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule,
    JsonpModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent,
    routedComponents
  ],
  providers: [
    HeroService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

A singleton serviceist ein Dienst, für den in einer App nur eine Instanz vorhanden ist.

Es gibt (2) Möglichkeiten , einen Singleton-Dienst für Ihre Anwendung bereitzustellen.

1. Verwenden Sie die providedInEigenschaft, oder

2. Stellen Sie das Modul direkt in AppModuleder Anwendung bereit

Mit zur Verfügung gestelltIn

Ab Angular 6.0 besteht die bevorzugte Methode zum Erstellen eines Singleton-Dienstes darin, providedInim @Injectable()Decorator des Dienstes als Root festzulegen. Dadurch wird Angular angewiesen, den Dienst im Anwendungsstamm bereitzustellen.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

Array von NgModule-Anbietern

In Apps, die mit Angular-Versionen vor 6.0 erstellt wurden, werden Dienste wie folgt als NgModule-Anbieter-Arrays registriert:

@NgModule({
  ...
  providers: [UserService],
  ...
})

Wenn dies NgModuleder Stamm wäre AppModule, wäre der UserService ein Singleton und in der gesamten App verfügbar. Obwohl Sie möglicherweise sehen, dass es auf diese Weise codiert ist, ist die Verwendung der providedInEigenschaft des @Injectable()Dekorateurs für den Dienst selbst ab Angular 6.0 vorzuziehen, da dies Ihre Dienste baumschüttelnd macht.

Wenn Sie @Injectabledem Service einen Dekorator hinzufügen und ihn als Anbieter im Root-Modul registrieren, wird er zu einem Singleton.

Das scheint gut für mich zu funktionieren

@Injectable()
export class MyStaticService {
  static instance: MyStaticService;

  constructor() {
    return MyStaticService.instance = MyStaticService.instance || this;
  }
}

Hier ist ein Arbeitsbeispiel mit Angular Version 2.3. Rufen Sie einfach den Konstruktor des Dienstes wie diesen Konstruktor auf (private _userService: UserService). Und es wird ein Singleton für die App erstellt.

user.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';
import { User } from '../object/user';


@Injectable()
export class UserService {
    private userChangedSource;
    public observableEvents;
    loggedUser:User;

    constructor() {
       this.userChangedSource = new Subject<any>();
       this.observableEvents = this.userChangedSource.asObservable();
    }

    userLoggedIn(user:User) {
        this.loggedUser = user;
        this.userChangedSource.next(user);
    }

    ...
}

app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../service/user.service';
import { User } from '../object/user';

@Component({
    selector: 'myApp',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    loggedUser:User;

    constructor(private _userService:UserService) { 
        this._userService.observableEvents.subscribe(user => {
                this.loggedUser = user;
                console.log("event triggered");
        });
    }
    ...
}

Sie können useValuein Anbietern verwenden

import { MyService } from './my.service';

@NgModule({
...
  providers: [ { provide: MyService, useValue: new MyService() } ],
...
})

Von Angular @ 6 können Sie providedInin einem Injectable.

@Injectable({
  providedIn: 'root'
})
export class UserService {

}

Überprüfen Sie die Dokumente hier

Es gibt zwei Möglichkeiten, einen Dienst in Angular zu einem Singleton zu machen:

1. Deklarieren Sie, dass der Dienst im Anwendungsstamm bereitgestellt werden soll.
2. Fügen Sie den Dienst in das AppModule oder in ein Modul ein, das nur vom AppModule importiert wird.

Ab Angular 6.0 besteht die bevorzugte Methode zum Erstellen von Singleton-Diensten darin, auf dem Dienst anzugeben, dass er im Anwendungsstamm bereitgestellt werden soll. Dies erfolgt durch Setzen von Bereitgestelltem auf root im @Injectable-Dekorator des Dienstes:

Deklarieren Sie Ihren Dienst einfach nur in app.module.ts als Anbieter.

Es hat den Job für mich gemacht.

providers: [Topic1Service,Topic2Service,...,TopicNService],

dann instanziieren Sie es entweder mit einem privaten Konstruktorparameter:

constructor(private topicService: TopicService) { }

oder da, wenn Ihr Dienst von HTML verwendet wird, die Option -prod Folgendes beansprucht:

Property 'topicService' is private and only accessible within class 'SomeComponent'.

Fügen Sie ein Mitglied für Ihren Dienst hinzu und füllen Sie es mit der im Konstruktor empfangenen Instanz:

export class SomeComponent {
  topicService: TopicService;
  constructor(private topicService: TopicService) { 
    this.topicService= topicService;
  }
}

1. Wenn Sie Service Singleton auf Anwendungsebene erstellen möchten, sollten Sie es in app.module.ts definieren

   Anbieter: [MyApplicationService] (Sie können dasselbe auch im untergeordneten Modul definieren, um es modulspezifisch zu machen.)

   • Fügen Sie diesen Dienst nicht in den Provider ein, der eine Instanz für diese Komponente erstellt, die das Singleton-Konzept verletzt. Fügen Sie ihn einfach über den Konstruktor ein.

2. Wenn Sie einen Singleton-Service auf Komponentenebene definieren möchten, fügen Sie diesen Service in app.module.ts hinzu und fügen Sie das Provider-Array innerhalb einer bestimmten Komponente hinzu, wie im folgenden Snipet gezeigt.

   @Component ({Selektor: 'app-root', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'], Anbieter: [TestMyService]})

3. Angular 6 bietet eine neue Möglichkeit, Dienste auf Anwendungsebene hinzuzufügen. Anstatt dem Array "provider []" in AppModule eine Serviceklasse hinzuzufügen, können Sie in @Injectable () die folgende Konfiguration festlegen:

   @Injectable ({vorausgesetztIn: 'root'}) Exportklasse MyService {...}

Die "neue Syntax" bietet jedoch einen Vorteil: Dienste können von Angular (hinter den Kulissen) träge geladen und redundanter Code automatisch entfernt werden. Dies kann zu einer besseren Leistung und Ladegeschwindigkeit führen - obwohl dies nur für größere Dienste und Apps im Allgemeinen gilt.

Zusätzlich zu den oben genannten hervorragenden Antworten fehlt möglicherweise noch etwas anderes, wenn sich die Dinge in Ihrem Singleton immer noch nicht als Singleton verhalten. Ich bin auf das Problem gestoßen, als ich eine öffentliche Funktion für den Singleton aufgerufen habe und festgestellt habe, dass die falschen Variablen verwendet wurden. Es stellt sich heraus, dass das Problem darin bestand, dass thisnicht garantiert wird, dass es für öffentliche Funktionen im Singleton an den Singleton gebunden ist. Dies kann durch Anschluss an die Beratung korrigiert wird hier , wie so:

@Injectable({
  providedIn: 'root',
})
export class SubscriptableService {
  public serviceRequested: Subject<ServiceArgs>;
  public onServiceRequested$: Observable<ServiceArgs>;

  constructor() {
    this.serviceRequested = new Subject<ServiceArgs>();
    this.onServiceRequested$ = this.serviceRequested.asObservable();

    // save context so the singleton pattern is respected
    this.requestService = this.requestService.bind(this);
  }

  public requestService(arg: ServiceArgs) {
    this.serviceRequested.next(arg);
  }
}

Alternativ können Sie die Klassenmitglieder einfach als public staticstatt deklarieren public, dann spielt der Kontext keine Rolle, aber Sie müssen auf sie zugreifen, SubscriptableService.onServiceRequested$anstatt die Abhängigkeitsinjektion zu verwenden und über auf sie zuzugreifen this.subscriptableService.onServiceRequested$.

Eltern- und Kinderbetreuung

Ich hatte Probleme mit einem Elterndienst und seinem Kind, die verschiedene Instanzen verwendeten. Um die Verwendung einer Instanz zu erzwingen, können Sie das übergeordnete Element in Bezug auf das untergeordnete Element in Ihren App-Modulanbietern aliasisieren. Der Elternteil kann nicht auf die Eigenschaften des Kindes zugreifen, aber für beide Dienste wird dieselbe Instanz verwendet. https://angular.io/guide/dependency-injection-providers#aliased-class-providers

app.module.ts

providers: [
  ChildService,
  // Alias ParentService w/ reference to ChildService
  { provide: ParentService, useExisting: ChildService}
]

Dienste, die von Komponenten außerhalb des Anwendungsbereichs Ihrer App-Module verwendet werden

Beim Erstellen einer Bibliothek, die aus einer Komponente und einem Dienst besteht, ist ein Problem aufgetreten, bei dem zwei Instanzen erstellt wurden. Eine von meinem Angular-Projekt und eine von der Komponente in meiner Bibliothek. Die Reparatur:

my -side.component.ts

@Component({...})
export class MyOutsideComponent {
  @Input() serviceInstance: MyOutsideService;
  ...
}

my-inside.component.ts

  constructor(public myService: MyOutsideService) { }

my-inside.component.hmtl

<app-my-outside [serviceInstance]="myService"></app-my-outside>