Как разделить сервис между двумя модулями - @NgModule в angular, а не между компонентами?

2021-02-03

В последних версиях Angular это решается с помощью @Injectable({providedIn: 'platform'})

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

Исходный

Вы можете создать экземпляр службы вне Angular и указать значение:

class SharedService {
  ...
}

window.sharedService = new SharedService();

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

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

Если одно приложение изменяет состояние в SharedService или вызывает метод, который заставляет Observable испускать значение, а подписчик находится в другом приложении, чем эмиттер, код в подписчике выполняется в NgZone эмиттера.

Поэтому при подписке на наблюдаемое в SharedService используйте

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

См. Также Как динамически создавать модальные окна начальной загрузки как компоненты Angular2?

В соответствии с окончательной версией Angular 2 услуги, предоставляемые модулем, доступны для всех других модулей, которые его импортируют. Официальное руководство по стилю советует, что общесистемные сервисы (одиночные), которые должны повторно использоваться в любом месте приложения, должны предоставляться каким-то Core Module, то есть импортироваться в главный App Module, чтобы он быть инъекционным везде.

Если вы не используете структуру, которая включает основной модуль с общими синглетонами, и вы независимо разрабатываете два модуля NgModules, и вы хотите, чтобы служба в одном из них использовалась в другом, то единственное решение - импортировать поставщика в другой :

Вот модуль провайдера:

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

Вот другой модуль, который хочет использовать 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 { }

Таким образом, сервис должен быть внедрен в любой компонент, объявленный SomeOtherModule, а в самом SomeModule - просто запросите его в конструкторе:

/// 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();
    }
}

Если это не дает ответа на ваш вопрос, я предлагаю вам переформулировать его.

1. создать общий модуль

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

2. в модуле приложения ваш родительский модуль приложения импортирует общий модуль, подобный этому

   SharedModule.forRoot()
   

3. любые дочерние модули, если вам нужно импортировать общий модуль, импортируйте его без root

   SharedModule
   

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

Ответ, который дал Гюнтер Цохбауэр, великолепен, однако у вас может возникнуть одна проблема:

window.sharedService

вызовет ошибку в TypeScript. Вы можете обойти это, заменив все экземпляры

window.sharedService

с участием

(<any>window).sharedService

Я попытался использовать идеи в этом ответе для обмена данными между несколькими загружаемыми модулями в моем приложении angular. Данные, которые меня интересовали, поступали из вызова http.get (). Это был дорогостоящий звонок, и я хотел сделать звонок только один раз и поделиться его результатами между двумя моими загрузочными модулями.

Первоначально я сохранил службу как свойство в моем глобальном оконном объекте, как было предложено, но в конце я решил использовать статические переменные и вызвать publishReplay () на моем наблюдаемом, чтобы создать ReplaySubject для воспроизведения моих выбросов будущим подписчикам. Это позволило нескольким подписчикам обмениваться данными и выполнять вызов REST только один раз.

Одно предостережение ... В исходном вопросе задавался вопрос, как поделиться одной службой ... Этот ответ не разделяет одну службу ... Создается несколько служб, но данные распределяются, поскольку наблюдаемое хранится в статической переменной ... Это означает, что наблюдаемое сохраняется до тех пор, пока ваше приложение и из-за вызова publishReplay() любого, кто подписывается на наблюдаемое, воспроизводит ранее возвращенные данные.

Вот мой код:

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

}

Надеюсь это поможет.

Я думаю, что ниже - аккуратное и чистое решение. Я использовал во многих проектах.

Создайте общий модуль (AdModule в моем случае)

/// ad.module.ts

import ...

// create shared service(AdmobService in my case) object, pass constructor params (if you required)
const admobService = new AdmobService(new AdMobFree(), new InAppPurchase()); 

@NgModule({
  providers: [
    ...,
    { provide: AdmobService, useValue: admobService }, //  use shared service here like this
  ]
})
export class AdModule { }

импортировать AdModule в любой модуль, где вы хотите использовать общую службу (AdmobService)

Модуль1

/// module1.ts
@NgModule({
  imports: [
    ...,
    AdModule, // import shared module
  ],
})
export class Module1 { }

Модуль 2

/// module2.ts
@NgModule({
  imports: [
    ...,
    AdModule, // import shared module
  ],
})
export class Module2 { }

Вы не можете использовать ответ @ Günter Zöchbauer, если вы вводите какую-либо зависимость от службы. Мое решение для служб, которым требуются дополнительные зависимости, - назначить их объекту window в конструкторе службы.

export class MyService {
  private Cahces = {};
  constructor(protected http: HttpClient, private logger: LogService) {
    if (!(<any>window).myService) {
      (<any>window).myService = this;
    }
    return (<any>window).myService;
  }
}

Это гарантирует, что будет только одна услуга, независимо от того, как услуга предоставляется в модулях.