ejemplo - pasar parametros entre componentes angular 4

¿Cómo compartir el servicio entre dos módulos: @NgModule en angular, no entre componentes?

Question

En mi aplicación, tengo dos módulos de arranque diferentes ( @NgModule ) ejecutándose independientemente en una aplicación. No hay un módulo de arranque separado de bit de aplicación angular y ahora quiero que se comuniquen entre sí y compartan datos.

Sé que a través del servicio @Injectable como proveedor en el módulo, puedo compartir datos en todos los componentes en @NgModule pero cómo compartiré datos entre dos módulos diferentes (no el componente dentro del módulo).

¿Hay alguna forma de acceder a un objeto de servicio en otro módulo? ¿Hay alguna manera de acceder al objeto del Servicio disponible en la memoria del navegador y usarlo en mi otro módulo angular?

Answer 1

1. crear módulo compartido

   @NgModule({})
   export class SharedModule {
   static forRoot(): ModuleWithProviders {
   return {
   ngModule: SharedModule,
   providers: [SingletonService]
   };
   }
   }

2. en el módulo de la aplicación, el módulo de la aplicación principal importa el módulo compartido así

   SharedModule.forRoot()

3. cualquiera de los módulos secundarios si necesita importar el módulo compartido, impórtelo sin la raíz

   SharedModule

https://angular-2-training-book.rangle.io/handout/modules/shared-modules-di.html

Answer 2

Intenté usar las ideas en esta respuesta para compartir datos entre múltiples módulos de arranque en mi aplicación angular. Los datos que me interesaban provenían de una llamada http.get (). Fue una llamada costosa y solo quería hacer la llamada una vez y compartir sus resultados entre mis 2 módulos de arranque.

Inicialmente, almacené el servicio como una propiedad en mi objeto de ventana global como se sugirió, pero al final, decidí usar variables estáticas y llamar a PublishReplay () en mi observable para crear un ReplaySubject para reproducir mis emisiones a futuros suscriptores. Esto permitió que varios suscriptores compartan datos y solo realicen la llamada REST una vez.

Una advertencia aquí ... La pregunta original preguntaba cómo compartir un servicio ... Esta respuesta no comparte un servicio ... Se crean múltiples servicios, pero los datos se comparten como el observable se almacena en una variable estática ... Eso significa que el observable se publishReplay() mientras su aplicación y debido a la llamada para publishReplay() cualquier persona que se suscriba al observable reproduce los datos devueltos anteriormente.

Aquí está mi código:

import { Injectable } from ''@angular/core'';
import { Observable, ReplaySubject } from ''rxjs/Rx'';
import { Http } from ''@angular/http'';
@Injectable()
export class InitService {
static observable: Observable<number> = null;
constructor(private http: Http) {}
getInitData(): Observable<number> {
if (InitService.observable == null) {
InitService.observable = this.http.get(''api/Init'')
.map(this.extractData)
.publishReplay()
.refCount()
.catch(this.handleError);
}
return InitService.observable;
}
extractData(res: Response) {
let body: any = res.json();
return body || {};
}
}

Espero que esto ayude.

Answer 3

La respuesta que dio Günter Zöchbauer es excelente, sin embargo, un problema que puede tener es que

window.sharedService

provocará un error en TypeScript. Puede solucionar esto reemplazando todas las instancias de

window.sharedService

con

(<any>window).sharedService

Answer 4

Puede crear una instancia de un servicio fuera de Angular y proporcionar un valor:

class SharedService {
...
}

window.sharedService = new SharedService();
@NgModule({
providers: [{provide: SharedService, useValue: window.sharedService}],
...
})
class AppModule1 {}
@NgModule({
providers: [{provide: SharedService, useValue: window.sharedService}],
...
})
class AppModule2 {}

Si una aplicación cambia el estado en SharedService o llama a un método que hace que un Observable emita un valor y el suscriptor está en una aplicación diferente que el emisor, el código en el suscriptor se ejecuta en la NgZone del emisor.

Por lo tanto, al suscribirse a un uso observable en SharedService

class MyComponent {
constructor(private zone:NgZone, private sharedService:SharedService) {
sharedService.someObservable.subscribe(data => this.zone.run(() => {
// event handler code here
}));
}
}

Consulte también ¿Cómo crear dinámicamente modales bootstrap como componentes Angular2?

Answer 5

Según la versión final de Angular 2, los servicios proporcionados por un módulo están disponibles para cualquier otro módulo que lo importe. La Guía de estilo oficial aconseja que los servicios de toda la aplicación (singletons) que se reutilizarán en cualquier lugar de la aplicación deben ser provistos por algún Core Module , que se importará en el App Module principal para que sea inyectable en todas partes.

Si no usa una estructura que implique un Módulo principal con singletons compartidos, y está desarrollando independientemente dos NgModules, y desea que un servicio en uno de ellos se use en el otro, entonces la única solución es importar el proveedor en el otro :

Aquí está el módulo del proveedor:

/// some.module.ts
import { NgModule } from ''@angular/core'';
import { SomeComponent } from ''./some.component'';
@NgModule({
imports: [],
exports: [],
declarations: [SomeComponent],
providers: [ MyService ], // <======================= PROVIDE THE SERVICE
})
export class SomeModule { }

Aquí está el otro módulo, que quiere usar MyService

/// some-other.module.ts
import { NgModule } from ''@angular/core'';
import { SomeModule } from ''path/to/some.module''; // <=== IMPORT THE JSMODULE
import { SomeOtherComponent } from ''./some.other.component'';
@NgModule({
imports: [ SomeModule ], // <======================== IMPORT THE NG MODULE
exports: [],
declarations: [SomeOtherComponent],
providers: [],
})
export class SomeOtherModule { }

De esta manera, el servicio debe ser inyectable en cualquier componente que SomeOtherModule declare, y en SomeModule en sí, solo solicítelo en el constructor:

/// some-other.module.ts
import { MyService } from ''path/to/some.module/my-service'';
/* ...
rest of the module
*/
export class SomeOtherModule {
constructor( private _myService: MyService) { <====== INJECT THE SERVICE
this._myService.dosmth();
}
}

Si esto no responde a su pregunta, lo invito a volver a formularlo.