Angular: Как переопределить службу общего модуля из другого модуля

Question

У меня несколько модулей говорят SchoolModule, UniversityModule, SharedModule

SharedModule имеет BaseService, на который распространяются поставщики SchoolModule и UniversityModule

Теперь, когда я загружаю SchoolModule, я хочу, чтобы BaseService должен получить реализацию schoolService, и то же самое относится к UniversityModule

Структура

app
  -- SharedModule
       -- base.service
       -- secret.service uses base.service
       -- shared.component uses secret.service

  -- SchoolModule
       -- school.component uses shared.component
       -- school.service

 -- UniversityModule
        -- university.component uses shared.component
        -- university.service

StackBlitz

Итак, как мне достичь этого с помощью инъекции зависимостей?

Answer 1

К сожалению, Angular2 не может внедрить класс из другого модуля без получения импорта между модулями, и, если вам нужно лениво загрузить его, все не работает.Есть проект, который динамически загружает компонент из другого модуля.Трудно импортировать это в ваш проект, но экономит вас, чтобы не кодировать дважды.
Этот проект можно найти здесь .

Answer 2

Проблема заключается в том, что SecretService представляет собой сборку со сборкой в ​​последний импортированный модуль UniversityModule в модуле приложения, поэтому, если вы хотите, чтобы SecretService обновлялся корректно с помощью BaseService, вы должны предоставить как BaseService, так и SecretService для университета и школьного компонента, что-то вроде этогов school.component.ts:

import { SchoolService } from './school.service'
import { BaseService } from '../shared/base.service'
import { SecretService } from '../shared/secret.service'

    @Component({
      selector: 'app-school',
      template: `SchoolName :: <app-shared></app-shared>`,
      providers: [
        { provide: BaseService, useClass: SchoolService },
        SecretService]
    })
    export class SchoolComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

и в university.component.ts

import {  UniversityService } from './university.service'
import { BaseService } from '../shared/base.service'
import { SecretService } from '../shared/secret.service'


@Component({
  selector: 'app-university',
  template: `UniversityName :: <app-shared></app-shared>`,
  providers: [{ provide: BaseService, useClass: UniversityService },
  SecretService]
})
export class UniversityComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Но почему вы хотите обернуть базовый сервис в SecretService вместо непосредственного использования BaseService в совместно используемом компоненте?

Используя BaseService, как это в shared.component.ts

import { Component, OnInit } from '@angular/core';
import { BaseService } from './base.service'
@Component({
  selector: 'app-shared',
  template: `{{name}}`
})
export class SharedComponent implements OnInit {

  name: string
  constructor(private ss: BaseService) {
    this.name = ss.getName()
  }

  ngOnInit() {
  }

}

Используя BaseService, вы решите эту проблему внедрения без каких-либо обходных путей для SecretService

Answer 3

Вы должны объявить свой базовый класс обслуживания как абстрактный класс с абстрактным методом getName ()

export abstract class BaseService{


    abstract getName(): string { return 'Base Service' }


}

export class SchoolService extends BaseService{

   getName(): string { return 'School Service' }

}