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

Solución:

Según la versión final de Angular 2, los servicios proporcionados por un módulo están disponibles para todos los demás módulos que lo importan. La Guía de estilo oficial aconseja que algunos Core Module, que se importará en la principal App Module por lo que sería inyectable en todas partes.

Si no usa una estructura que involucra un módulo principal con singletons compartidos, y está desarrollando de forma independiente 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 a el otro :

Aquí está el módulo de 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 forma, el servicio debe ser inyectable en cualquier componente. SomeOtherModule declara, 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 reformularlo.

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 para

   SharedModule
   

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

2021-02-03

En versiones recientes de Angular esto se resuelve usando @Injectable({providedIn: 'platform'})

https://angular.io/api/core/Injectable

Original

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 causa una Observable para emitir un valor y el suscriptor está en una aplicación diferente a la del emisor, el código en el suscriptor se ejecuta en el NgZone del emisor.

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

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 de arranque como componentes de Angular2?

---

---

Utiliza Nuestro Buscador