ejemplos - angular wikipedia

Angular2 "Servicios" ¿cómo @ inyectar un servicio en otro(singletons)?

Question

¿Cómo haría para inyectar un servicio en otro? Digamos, por ejemplo, que tengo una colección que requiere otra colección (TeamCollection => PlayerCollection). Actualmente solo creo dos Colecciones separadas y uso algo como:

import {PlayerCollection} from "<<folder>>/player";

Pero esto requiere que escriba mi propio código getInstance de singleton en Typescript para todos y cada uno de los servicios en los que quiero ser una instancia de singleton.

¿Cuál es la forma correcta de hacer esto? Quiero tener ambos singletons dentro de mis Componentes y poder @Inyectar un servicio en otro usando la sintaxis del constructor, sin crear una nueva instancia de los singletons.

class TeamCollection {
constructor(@Inject(PlayerCollection): PlayerCollection) {}
}

Answer 1

Descubrí que otra forma de tener un servicio de singleton es creando el patrón de singleton con un método getInstance () que llama al constructor, entonces no inyectas tu servicio al constructor del componente, sino que simplemente lo refieres como una clase estática. Puede consultar el código de muestra aquí:

Acceda a los datos clave en toda la aplicación en Angular 2 y Ionic 2

Busca mi respuesta, creo que es la segunda en la página. Si funciona para usted, le agradecería que lo votara. Gracias.

Answer 2

Entonces, después de volver a leer este excelente post de Pascal Precht: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

Y al verlo comentar en: http://twofuckingdevelopers.com/2015/04/angular-2-singleton-service/

"Todo lo que se inyecta con el DI de Angular 2 ya es un Singleton. No hay necesidad de tal servicio"

Fui a probar, y lo que encontré ahora respondió a mi pregunta y me confundió aún más sobre el tema de la DI en angular2.

Vea el siguiente código:

equipo.ts

import {BaseCollection, BaseModel} from "./base";
import {PlayerCollection} from ''./player'';
import {Injectable, Inject} from "angular2/angular2";
@Injectable()
export class TeamCollection extends BaseCollection {
playerCollection: PlayerCollection;
constructor(@Inject(PlayerCollection) playerCollection: PlayerCollection) {
super();
this.playerCollection = playerCollection;
}
create(data: Object): TeamModel {
return new TeamModel(data);
}
}

jugador.ts

import {BaseCollection, BaseModel} from "./base";
import {Injectable} from "angular2/angular2";
@Injectable()
export class PlayerCollection extends BaseCollection {
create(data: Object): PlayerModel {
return new PlayerModel(data);
}
}

team.spec.ts

/// <reference path="../../typings.d.ts" />
//VERY IMPORTANT TO ALWAYS LOAD THESE
import ''zone.js'';
import ''reflect-metadata'';
import ''es6-shim'';
import {TeamModel, TeamCollection} from "../../app/model/team";
import {PlayerCollection} from "../../app/model/player";
import {Inject, Injector} from "angular2/angular2";
describe(''TeamCollection'', () => {
var teamCollection: TeamCollection;
var playerCollection: PlayerCollection;
beforeEach(() => {
var injector = Injector.resolveAndCreate([
TeamCollection,
PlayerCollection
]);
teamCollection = injector.get(TeamCollection);
var injectorT = Injector.resolveAndCreate([
PlayerCollection
]);
playerCollection = injector.get(PlayerCollection);
});
it(''should have a singleton PlayerCollection shared between all classes within the application'', () => {
console.log(teamCollection.playerCollection.uuId);
console.log(playerCollection.uuId);
});
});

Siempre que fue el mismo Inyector ( var injector ) que creó ambos, comparten el mismo uuID. Aunque cuando uso un segundo inyector ( var injectorT ), los UUID son diferentes, lo que significa que se crea una nueva instancia de playerCollection.

Ahora mi pregunta sería. Si utilizo la sintaxis de los proveedores de componentes:

@Component({
selector: ''app'',
providers: [TeamCollection]
})
@Component({
selector: ''player-list'',
providers: [PlayerCollection]
})

¿Compartirían ambos la misma colección de jugadores o crearían una nueva instancia?

Editar: hacen siempre que se creen a través del método bootstrap(.., [ServiceA,ServiceB]) .

Gracias a pascal precht http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

Answer 3

Lo que necesita asegurarse es lo siguiente:

Solo puede inyectar el servicio una vez que haya "proporcionado" el servicio. Al hacer esto en un componente @ es fácil porque tiene la declaración de los proveedores [...].

Cuando desea hacer esto para un servicio, no tiene los proveedores: [] .... por lo que el único lugar donde puede hacerlo es durante el tiempo de arranque en el que necesita especificar el servicio en

boostrap(app, [
PlayerCollection,
Other,
More Services...
]

Si profundiza en la documentación, específicamente dice que debe hacerlo de esta manera.