Внедрить сервис из основного проекта в созданную библиотеку - PullRequest
Новая
       26

Внедрить сервис из основного проекта в созданную библиотеку

0 голосов
/ 24 апреля 2020

Я работаю с Angular 8.

Этот вопрос только для Angular экспертов DI.

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

В этой библиотеке я создал абстрактный сервис, который должен быть определен в проекте, используя его.

Я определил абстрактный класс в моей библиотеке с именем BridgeService

и в моем основном проекте я создаю свой BridgeService, реализующий его: (в следующих строках я покажу вам абстрактный BridgeService)

MainProject> BridgeService: 

import { BridgeService as AbstractBridgeService } from 'myLibrary';

@Injectable()
export class BridgeService implements AbstractBridgeService {

    hello(){
        alert('hello Word');
    }
}

MainProject> UsersModule: 

import { UsersModule as LibraryUsersModule } from 'myLibrary';

@NgModule({
    imports: [
        CommonModule,
        LibraryUsersModule,
    ],
    //...
    providers: [
        BridgeService
        // some try:
        //{ provide: BridgeService, useClass: BridgeService }
    ],
})
export class UsersModule {

    constructor(private bridgeService: BridgeService){
        this.bridgeService.hello();
    }

}

И теперь мы должны увидеть файлы, относящиеся к библиотеке:

Library> bridge.service.ts: 

export abstract class BridgeService {
    abstract hello(): void;
}

Этот BridgeService должен быть определен в UsersModule

Library> UsersModule: 

@NgModule({
    //...
    providers: [
        // My Try:
        { provide: BridgeService, useValue: BridgeService} 
    ],
})
export class UsersModule {

    # my goal is that I can uncomment this piece of code:

    //constructor(private bridgeService: BridgeService){
    //  this.bridgeService.hello();
    //}

}

Я хочу, чтобы вы коснулись в этом коде всего две строки:

1) В массиве провайдеров UsersModule библиотеки: строка BridgeS сервис, который я хочу объявить как реферат, будет обобщенным c.

2) В массиве провайдеров UsersModule проекта: строка BridgeService, которую я хочу определить вместо абстракции в UserModule библиотеки.

1 Ответ

1 голос
/ 27 апреля 2020

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

/** Token to inject the bridge service */
export const BRIDGE_SERVICE_ADAPTER:
    InjectionToken<BridgeServiceAdapter> =
        new InjectionToken<BridgeServiceAdapter>('Bridge service token');

export interface BridgeServiceAdapter {
  hello(): void;
}

Внутри вашей библиотеки вы можете вставить его следующим образом: 

export class UsersModule {
  constructor(
    @Inject(BRIDGE_SERVICE_ADAPTER) private bridgeService: BridgeServiceAdapter
  ){
    if(!bridgeService) {
      throw new Error('You must provide a bridge adapter');
    }
    this.bridgeService.hello();
  }
}

И в приложении, где вы находитесь собираюсь использовать библиотеку: 

import { BridgeServiceAdapter } from 'myLibrary';

@Injectable({providedIn: 'root'})
export class BridgeService implements BridgeServiceAdapter {
    hello() { alert('hello Word') }
}

...
import { UsersModule as LibraryUsersModule, BRIDGE_SERVICE_ADAPTER } from 'myLibrary';

@NgModule({
    imports: [CommonModule,LibraryUsersModule,...],
    providers: [{ provide: BRIDGE_SERVICE_ADAPTER, useExisting: BridgeService }],
})
export class UsersModule {
  // Obs 1: ok, this seems something you should be encapsulating inside
  //   your library to doesn't have to inject in the dependent projects
  // Obs 2: and, here, in the app, as I created BridgeService decorated
  //   with {providedIn: 'root'}, I can inject the service itself. But
  //   if this wasn't the case, I'd have to inject it using the same notation
  //   used in the library: 
  //   @Inject(BRIDGE_SERVICE_ADAPTER) private bridgeService: BridgeServiceAdapter
  //   This would be necessary if I had decorated my service with
  //
  //   @Injectable() (instead of @Injectable({providedIn: 'root'}))
  //
  //   and provided it like this:
  //
  //   { provide: BRIDGE_SERVICE_ADAPTER, useClass: BridgeService }
  //
  //   On the above line, notice "useClass" instead of "useExisting"
  constructor(private bridgeService: BridgeService) {
    this.bridgeService.hello();
  }
}
...