Angular 2'de nasıl bir singleton hizmeti oluşturabilirim?

Önyüklemenin tüm çocukların aynı örneği paylaşması gerektiğinde enjekte etmeyi okudum, ancak ana ve başlık bileşenlerim (ana uygulama başlık bileşeni ve yönlendirici-çıkış içeriyor) her biri hizmetlerimin ayrı bir örneğini alıyor.

Facebook javascript api ve FacebookService kullanan bir UserService arama yapmak için kullandığım bir FacebookService var. İşte benim bootstrap:

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

Günlük kaydımdan bootstrap çağrısı bitiyor gibi görünüyor, sonra FacebookService sonra UserService yapıcıların her biri, MainAppComponent, HeaderComponent ve DefaultComponent çalıştırmadan önce oluşturulduğunu görüyorum:

Jason tamamen haklı! Bağımlılık enjeksiyonunun çalışma şeklinden kaynaklanır. Hiyerarşik enjektörlere dayanır.

Bir Angular2 uygulaması içinde birkaç enjektör vardır:

• Uygulamanızı önyüklerken yapılandırdığınız kök
• Bileşen başına bir enjektör. Başka bir bileşen içinde bir bileşen kullanıyorsanız. Bileşen enjektörü ana bileşenin birinci çocuğudur. Uygulama bileşeni (uygulamanızı yeniden başlatırken belirttiğiniz bileşen) ana enjektör olarak kök enjektöre sahiptir).

Angular2 bileşen yapıcısına bir şey enjekte etmeye çalıştığında:

• Bileşenle ilişkili enjektöre bakar. Eşleşen bir varsa, karşılık gelen örneği almak için onu kullanır. Bu örnek tembel bir şekilde yaratılmıştır ve bu enjektör için tek bir tondur.
• Bu seviyede sağlayıcı yoksa, ana enjektöre (vb.) Bakacaktır.

Bu nedenle, tüm uygulama için tek birtona sahip olmak istiyorsanız, sağlayıcının kök enjektör veya uygulama bileşeni enjektör düzeyinde tanımlanmış olması gerekir.

Ancak Angular2, enjektör ağacına alttan bakacaktır. Bu, en düşük düzeydeki sağlayıcının kullanılacağı ve ilişkili örneğin kapsamının bu düzey olacağı anlamına gelir.

Daha fazla ayrıntı için bu soruya bakın:

• Açısal 2'de (Beta) bir hizmeti diğerine enjekte etmenin en iyi yolu nedir?

Güncelleme (Açısal 6 +)

Singleton hizmeti oluşturmanın önerilen yolu değişti. Şimdi @Injectabledekoratörde hizmetin 'kök' içinde sağlanması gerektiğini belirtmeniz önerilir . Bu benim için çok mantıklı ve artık modüllerinizde sağlanan tüm hizmetleri listelemeye gerek yok. Hizmetleri ihtiyacınız olduğunda içe aktarırsınız ve kendilerini uygun yere kaydederler. Ayrıca , yalnızca modül içe aktarılmışsa sağlanacak bir modül de belirtebilirsiniz .

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

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

Güncelleme (Açısal 2)

NgModule ile bunu yapmanın yolu, bence hizmet sınıfınızda bir 'CoreModule' oluşturmak ve hizmeti modülün sağlayıcılarında listelemek. Daha sonra ana uygulama modülünüzde, bu örneği kurucularında bu sınıfı isteyen çocuklara bir örnek sağlayacak olan çekirdek modülü içe aktarırsınız:

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

Orijinal Yanıt

Alanında bir sağlayıcı bootstrap()listelerseniz, bileşen dekoratörünüzde listelemenize gerek yoktur:

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

Aslında sınıfınızı 'sağlayıcılar' içinde listelemek yeni bir örneği oluşturur, eğer herhangi bir üst bileşen zaten listelemişse çocukların buna gerek yoktur ve eğer yaparlarsa yeni bir örnek alırlar.

Açının Thierry'nin söylediği gibi hiyerarşik enjektörleri olduğunu biliyorum.

Ama burada ebeveyne enjekte etmek istemediğiniz bir kullanım durumu bulmanız durumunda başka bir seçeneğim daha var.

Bunu, hizmetin bir örneğini oluşturarak başarabiliriz.

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);
    }
  })
];

Ve sonra bileşeninizde özel sağlama yönteminizi kullanırsınız.

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

Hiyerarşik enjektörlere bağlı kalmadan tek bir servisiniz olmalıdır.

Bunun daha iyi bir yol olduğunu söylemiyorum, sadece birinin hiyerarşik enjektörlerin mümkün olmadığı bir sorunu varsa.

Sözdizimi değiştirildi. Bu bağlantıyı kontrol et

Bağımlılıklar, bir enjektör kapsamındaki tek tonlardır. Aşağıdaki örnekte, HeroesComponent ve HeroListComponent alt öğeleri arasında tek bir HeroService örneği paylaşılmaktadır.

Adım 1. @Injectable dekoratörü ile singleton sınıfı oluşturun

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

Adım 2. Yapıcıya enjekte edin

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

Adım 3. Sağlayıcıyı kaydettirin

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

Ekleme @InjectableHizmete dekoratör, VE bu bir tekil yapacak Kök Modülü sağlayıcısı olarak kaydederek.

bu benim için iyi çalışıyor gibi görünüyor

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

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

İşte Angular sürüm 2.3 ile çalışan bir örnek. Hizmetin kurucusunu bu kurucu gibi stand olarak çağırmanız yeterlidir (private _userService: UserService). Ve uygulama için bir singleton oluşturacak.

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");
        });
    }
    ...
}

A singleton service, bir uygulamada yalnızca bir örneğinin bulunduğu bir hizmettir.

Başvurunuz için tek bir hizmet sunmanın (2) yolu vardır .

1. providedInmülkü kullanın veya

2. modülü doğrudan AppModuleuygulamanın içinde sağlayın

Verilen kullanımı

Açısal 6.0'dan başlayarak, tek bir hizmet oluşturmanın tercih edilen yolu providedIn, hizmetin @Injectable()dekoratörünün kök dizinine ayarlanmasıdır . Bu, Angular'a hizmeti uygulama kökünde sağlamasını bildirir.

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

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

NgModule sağlayıcıları dizisi

6.0'dan önceki Açısal sürümlerle oluşturulan uygulamalarda, hizmetler NgModule sağlayıcı dizileri aşağıdaki gibi kaydedilir:

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

Bu NgModulekök AppModuleolsaydı, UserService tek bir olurdu ve uygulama genelinde kullanılabilir. Bu şekilde kodlanmış görünse providedInde, @Injectable()dekoratörün özelliğini hizmetin kendisinde kullanmak, hizmetlerinizi ağaç sallanabilir hale getirdiği için Açısal 6.0'dan itibaren tercih edilir.

useValueSağlayıcılarda kullanabilirsiniz

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

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

Angular @ 6'dan providedInbir Injectable.

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

}

Dokümanları buradan kontrol edin

Açısal'da bir hizmeti tekil hale getirmenin iki yolu vardır:

1. Hizmetin uygulama kökünde sağlanması gerektiğini bildirin.
2. Hizmeti AppModule'a veya yalnızca AppModule tarafından içe aktarılan bir modüle ekleyin.

Açısal 6.0'dan başlayarak, tek bir hizmet oluşturmanın tercih edilen yolu, hizmetin uygulama kökünde sağlanması gerektiğini belirtmektir. Bu, hizmetin @Injectable dekoratörünün kök dizinine sağlananIn ayarlanarak yapılır:

Hizmetinizi yalnızca app.module.ts dosyasında sağlayıcı olarak bildirin.

Benim için bu işi yaptı.

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

sonra bir yapıcı özel parametresi kullanarak örneği başlatın:

constructor(private topicService: TopicService) { }

veya hizmetiniz html'den kullanılıyorsa, -prod seçeneği aşağıdaki hak talebinde bulunacaktır:

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

hizmetiniz için bir üye ekleyin ve bunu kurucuda alınan örnekle doldurun:

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

1. Uygulama düzeyinde hizmet singletonu yapmak istiyorsanız, app.module.ts içinde tanımlamanız gerekir.

   sağlayıcılar: [MyApplicationService] (aynı şeyi alt modülde tanımlayarak o modülü spesifik hale getirebilirsiniz)

   • Bu hizmeti, singleton kavramını bozan bileşen için bir örnek oluşturan sağlayıcıya eklemeyin, yalnızca yapıcıya enjekte edin.

2. Tek bileşenli hizmeti, bileşen oluşturma hizmetinde tanımlamak istiyorsanız, bu hizmeti app.module.ts dosyasına ekleyin ve aşağıdaki kod parçasında gösterildiği gibi belirli bir bileşenin içindeki sağlayıcılar dizisini ekleyin.

   @Component ({selector: 'app-root', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'], sağlayıcılar: [TestMyService]})

3. Açısal 6, uygulama düzeyinde hizmet eklemek için yeni bir yol sağlar. AppModule'deki sağlayıcılar [] dizisine bir hizmet sınıfı eklemek yerine, @Injectable () içinde aşağıdaki yapılandırmayı ayarlayabilirsiniz:

   @Injectable ({ProvInIn: 'root'}) ihracat sınıfı MyService {...}

"Yeni sözdizimi" bir avantaj sağlar: Hizmetler Angular (sahne arkasında) tarafından tembel olarak yüklenebilir ve yedek kod otomatik olarak kaldırılabilir. Bu, daha iyi bir performans ve yükleme hızına yol açabilir - ancak bu sadece genel olarak daha büyük hizmetler ve uygulamalar için devreye girer.

Yukarıdaki mükemmel cevaplara ek olarak, singletonunuzdaki şeyler hala singleton gibi davranmıyorsa eksik olan başka bir şey olabilir. Singleton'da genel bir işlevi çağırırken ve yanlış değişkenleri kullandığını tespit ederken bu sorunla karşılaştım. Sorunun, thissingletondaki herhangi bir kamu işlevi için singletona bağlı olacağı garanti edilmediği ortaya çıktı . Bu tavsiye takip ederek düzeltilebilir burada aynen böyle:

@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);
  }
}

Alternatif olarak, sınıf üyelerini bunun public staticyerine basitçe beyan edebilirsiniz public, o zaman bağlam önemli olmayacaktır, ancak SubscriptableService.onServiceRequested$bağımlılık enjeksiyonunu kullanmak ve onlara erişmek yerine onlara erişmek zorunda kalacaksınız this.subscriptableService.onServiceRequested$.

Ebeveyn ve çocuk hizmetleri

Bir ebeveyn hizmeti ve çocuğu ile farklı örnekler kullanarak sorun yaşıyordum. Bir örneği kullanılmaya zorlamak için üst öğeyi uygulama modülü sağlayıcılarınızdaki alt öğeye başvurularak takma adlandırabilirsiniz. Üst öğe çocuğun özelliklerine erişemez, ancak her iki hizmet için de aynı örnek kullanılır. 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}
]

Uygulama modülleri kapsamınızın dışındaki bileşenler tarafından kullanılan hizmetler

Bir bileşen ve hizmetten oluşan bir kütüphane oluştururken, iki örneğin oluşturulacağı bir sorunla karşılaştım. Biri açısal projem, diğeri kütüphanemin içindeki bileşen. Çözüm:

my-outside.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>