Como crio um serviço singleton no Angular 2?

Eu li que injetar quando o bootstrapping deve ter todos os filhos compartilhando a mesma instância, mas meus componentes principal e de cabeçalho (o aplicativo principal inclui o componente de cabeçalho e a saída do roteador) estão recebendo uma instância separada dos meus serviços.

Eu tenho um FacebookService que eu uso para fazer chamadas para a API Javascript do Facebook e um UserService que usa o FacebookService. Aqui está o meu bootstrap:

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

No meu registro, parece que a chamada de autoinicialização termina, e vejo o FacebookService e o UserService sendo criados antes da execução do código em cada um dos construtores, MainAppComponent, HeaderComponent e DefaultComponent:

Jason está completamente certo! É causada pela maneira como a injeção de dependência funciona. É baseado em injetores hierárquicos.

Existem vários injetores em um aplicativo Angular2:

• A raiz que você configura ao inicializar seu aplicativo
• Um injetor por componente. Se você usar um componente dentro de outro. O injetor de componente é filho do componente pai. O componente do aplicativo (aquele que você especifica ao inicializar seu aplicativo) tem o injetor raiz como pai).

Quando o Angular2 tenta injetar algo no construtor do componente:

• Examina o injetor associado ao componente. Se houver um correspondente, ele será usado para obter a instância correspondente. Essa instância é criada preguiçosamente e é um singleton para esse injetor.
• Se não houver um provedor nesse nível, ele examinará o injetor pai (e assim por diante).

Portanto, se você deseja ter um singleton para todo o aplicativo, é necessário que o provedor seja definido no nível do injetor raiz ou do componente do aplicativo.

Mas o Angular2 examinará a árvore do injetor por baixo. Isso significa que o provedor no nível mais baixo será usado e o escopo da instância associada será este nível.

Veja esta pergunta para mais detalhes:

• Qual é a melhor maneira de injetar um serviço em outro no angular 2 (Beta)?

Atualização (Angular 6 +)

A maneira recomendada de criar um serviço singleton mudou. Agora é recomendado especificar no @Injectabledecorador no serviço que ele deve ser fornecido na 'raiz'. Isso faz muito sentido para mim e não há mais a necessidade de listar todos os serviços fornecidos em seus módulos. Você apenas importa os serviços quando precisa deles e eles se registram no local apropriado. Você também pode especificar um módulo para que ele seja fornecido apenas se o módulo for importado.

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

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

Atualização (Angular 2)

Com o NgModule, acho que a maneira de fazer isso agora é criar um 'CoreModule' com sua classe de serviço e listar o serviço nos provedores do módulo. Em seguida, importe o módulo principal no módulo principal do aplicativo, que fornecerá a instância para todos os filhos que solicitarem essa classe em seus construtores:

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

Resposta original

Se você listar um provedor bootstrap(), não precisará listá-lo no decorador de componentes:

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

De fato, listar sua classe em 'fornecedores' cria uma nova instância dela, se algum componente pai já a lista, os filhos não precisam, e se o fizerem, obterão uma nova instância.

Eu sei que angular tem injetores hierárquicos como Thierry disse.

Mas tenho outra opção aqui, caso você encontre um caso de uso em que realmente não queira injetá-lo no pai.

Podemos conseguir isso criando uma instância do serviço e fornecendo sempre o retorno.

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

E, em seu componente, você usa seu método de fornecimento personalizado.

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

E você deve ter um serviço de singleton sem depender dos injetores hierárquicos.

Não estou dizendo que essa é uma maneira melhor, apenas no caso de alguém ter um problema em que injetores hierárquicos não são possíveis.

A sintaxe foi alterada. Verifique este link

Dependências são singletons no escopo de um injetor. No exemplo abaixo, uma única instância HeroService é compartilhada entre o HeroesComponent e seus filhos HeroListComponent.

Etapa 1. Crie uma classe singleton com o decorador @Injectable

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

Etapa 2. Injetar no construtor

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

Etapa 3. Registre o provedor

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

Adicionar @Injectabledecorador ao Serviço e registrá-lo como um provedor no Módulo Raiz o tornará um singleton.

isso parece estar funcionando bem para mim

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

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

Aqui está um exemplo de trabalho com o Angular versão 2.3. Basta chamar o construtor do serviço da maneira como este construtor (private _userService: UserService). E criará um singleton para o aplicativo.

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é um serviço para o qual existe apenas uma instância em um aplicativo.

Existem (2) maneiras de fornecer um serviço singleton para seu aplicativo.

1. use a providedInpropriedade ou

2. forneça o módulo diretamente no AppModuleaplicativo

Usando o fornecido

A partir do Angular 6.0, a maneira preferida de criar um serviço singleton é configurá-lo providedIncomo root no @Injectable()decorador do serviço . Isso indica à Angular para fornecer o serviço na raiz do aplicativo.

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

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

Matriz de provedores NgModule

Em aplicativos criados com versões Angular anteriores à 6.0, os serviços são matrizes de provedores NgModule registradas da seguinte maneira:

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

Se essa NgModulefosse a raiz AppModule, o UserService seria um singleton e disponível em todo o aplicativo. Embora você possa vê-lo codificado dessa maneira, é preferível usar a providedInpropriedade do @Injectable()decorador no próprio serviço a partir do Angular 6.0, pois ele torna seus serviços tremendos em árvore.

Você pode usar useValueem provedores

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

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

No Angular @ 6, você pode ter providedInum Injectable.

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

}

Confira os documentos aqui

Existem duas maneiras de tornar um serviço um singleton no Angular:

1. Declare que o serviço deve ser fornecido na raiz do aplicativo.
2. Inclua o serviço no AppModule ou em um módulo importado apenas pelo AppModule.

A partir do Angular 6.0, a maneira preferida de criar um serviço singleton é especificar no serviço que ele deve ser fornecido na raiz do aplicativo. Isso é feito configurando a opção fornecidoIn como root no decorador @Injectable do serviço:

Apenas declare seu serviço como provedor apenas em app.module.ts.

Ele fez o trabalho para mim.

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

instancie-o usando um parâmetro privado do construtor:

constructor(private topicService: TopicService) { }

ou, se o serviço for usado em html, a opção -prod reivindicará:

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

adicione um membro para o seu serviço e preencha-o com a instância recebida no construtor:

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

1. Se você deseja tornar o serviço único no nível do aplicativo, defina-o em app.module.ts

   Provedores: [MyApplicationService] (você também pode definir o mesmo no módulo filho para torná-lo específico)

   • Não adicione este serviço no provedor que cria uma instância para esse componente que quebra o conceito de singleton, apenas injeta através do construtor.

2. Se você deseja definir o serviço singleton no serviço de criação no nível do componente, adicione esse serviço em app.module.ts e adicione na matriz de provedores o componente específico, conforme mostrado no snipet abaixo.

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

3. O Angular 6 fornece uma nova maneira de adicionar serviço no nível do aplicativo. Em vez de adicionar uma classe de serviço à matriz de provedores [] no AppModule, você pode definir a seguinte configuração em @Injectable ():

   @Injectable ({fornecidoIn: 'root'}) classe de exportação MyService {...}

A "nova sintaxe" oferece uma vantagem: os serviços podem ser carregados preguiçosamente pelo Angular (nos bastidores) e o código redundante pode ser removido automaticamente. Isso pode levar a um melhor desempenho e velocidade de carregamento - embora isso realmente atinja apenas serviços e aplicativos maiores em geral.

Além das excelentes respostas acima, pode haver algo que está faltando se as coisas no seu singleton ainda não estiverem se comportando como um singleton. Corri para o problema ao chamar uma função pública no singleton e descobrir que ele estava usando as variáveis ​​erradas. Acontece que o problema era que thisnão é garantido que ele esteja vinculado ao singleton para quaisquer funções públicas no singleton. Isso pode ser corrigido seguindo os conselhos aqui , da seguinte maneira:

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

Como alternativa, você pode simplesmente declarar os membros da classe como em public staticvez de public, então o contexto não importa, mas você terá que acessá-los como em SubscriptableService.onServiceRequested$vez de usar injeção de dependência e acessá-los via this.subscriptableService.onServiceRequested$.

Serviços para pais e filhos

Eu estava tendo problemas com um serviço pai e seu filho usando instâncias diferentes. Para forçar uma instância a ser usada, você pode alias o pai com referência ao filho nos fornecedores do módulo de aplicativo. O pai não poderá acessar as propriedades do filho, mas a mesma instância será usada para ambos os serviços. https://angular.io/guide/dependency-injection-providers#aleased-class-providers

app.module.ts

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

Serviços usados ​​por componentes fora do escopo dos módulos de aplicativos

Ao criar uma biblioteca que consiste em um componente e um serviço, deparei-me com um problema em que duas instâncias seriam criadas. Um pelo meu projeto Angular e outro pelo componente dentro da minha biblioteca. O conserto:

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>