У меня есть набор компонентов angular2, в которые должны быть внедрены некоторые службы. Моя первая мысль заключалась в том, что было бы лучше создать суперкласс и внедрить туда сервис. Тогда любой из моих компонентов расширил бы этот суперкласс, но этот подход не работает.

Упрощенный пример:

export class AbstractComponent {
  constructor(private myservice: MyService) {
    // Inject the service I need for all components
  }
}

export MyComponent extends AbstractComponent {
  constructor(private anotherService: AnotherService) {
    super(); // This gives an error as super constructor needs an argument
  }
}

Я мог бы решить эту проблему, вводя MyServiceв каждый компонент и используя этот аргумент для super()вызова, но это определенно какой-то абсурд.

Как правильно организовать мои компоненты, чтобы они унаследовали сервис от суперкласса?

Я мог бы решить эту проблему, внедрив MyService в каждый компонент и используя этот аргумент для вызова super (), но это определенно какой-то абсурд.

Это не абсурд. Так работают конструкторы и внедрение конструкторов.

Каждый внедряемый класс должен объявлять зависимости как параметры конструктора, и если суперкласс также имеет зависимости, они также должны быть перечислены в конструкторе подкласса и переданы суперклассу с super(dep1, dep2)вызовом.

Передача инжектора и получение зависимостей обязательно имеет серьезные недостатки.

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

Обновленное решение предотвращает создание нескольких экземпляров myService с помощью глобального инжектора.

import {Injector} from '@angular/core';
import {MyServiceA} from './myServiceA';
import {MyServiceB} from './myServiceB';
import {MyServiceC} from './myServiceC';

export class AbstractComponent {
  protected myServiceA:MyServiceA;
  protected myServiceB:MyServiceB;
  protected myServiceC:MyServiceC;

  constructor(injector: Injector) {
    this.settingsServiceA = injector.get(MyServiceA);
    this.settingsServiceB = injector.get(MyServiceB);
    this.settingsServiceB = injector.get(MyServiceC);
  }
}

export MyComponent extends AbstractComponent {
  constructor(
    private anotherService: AnotherService,
    injector: Injector
  ) {
    super(injector);

    this.myServiceA.JustCallSomeMethod();
    this.myServiceB.JustCallAnotherMethod();
    this.myServiceC.JustOneMoreMethod();
  }
}

Это гарантирует, что MyService может использоваться в любом классе, расширяющем AbstractComponent, без необходимости вводить MyService в каждый производный класс.

У этого решения есть некоторые минусы (см. Ccomment от @ Günter Zöchbauer ниже моего исходного вопроса):

• Внедрение глобального инжектора - это улучшение только тогда, когда есть несколько различных сервисов, которые необходимо ввести во многих местах. Если у вас есть только одна общая служба, то, вероятно, лучше / проще внедрить эту службу в производный класс (классы)
• Мое решение и предлагаемая им альтернатива имеют тот недостаток, что затрудняют определение того, какой класс зависит от того, какой сервис.

Для очень хорошо написанного объяснения внедрения зависимостей в Angular2 см. Это сообщение в блоге, которое очень помогло мне решить проблему: http://blog.oughttram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

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

Производный класс:

@Component({
    ...
    providers: [ProviderService]
})
export class DerivedComponent extends BaseComponent {
    constructor(protected providerService: ProviderService) {
        super(providerService);
    }
}

Базовый класс:

export class BaseComponent {
    constructor(protected providerService: ProviderService) {
        // do something with providerService
    }
}

Класс предоставления услуг:

@Injectable()
export class ProviderService {
    constructor(private _apiService: ApiService, private _authService: AuthService) {
    }
}

Вместо того, чтобы внедрять сервис, который имеет все остальные сервисы в качестве зависимостей, например:

class ProviderService {
    constructor(private service1: Service1, private service2: Service2) {}
}

class BaseComponent {
    constructor(protected providerService: ProviderService) {}

    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

Я бы пропустил этот дополнительный шаг и просто добавил бы все службы в BaseComponent, например:

class BaseComponent {
    constructor(protected service1: Service1, protected service2: Service2) {}
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        this.service1;
        this.service2;
    }
}

Этот метод предполагает 2 вещи:

1. Ваше беспокойство полностью связано с наследованием компонентов. Скорее всего, вы столкнулись с этим вопросом потому, что огромное количество несухого (WET?) Кода нужно повторять в каждом производном классе. Если вы хотите использовать единую точку входа для всех ваших компонентов и сервисов , вам нужно будет сделать дополнительный шаг.

2. Каждый компонент расширяет BaseComponent

Также имеется недостаток, если вы решите использовать конструктор производного класса, так как вам нужно будет вызвать super()и передать все зависимости. Хотя я действительно не вижу варианта использования, который требовал бы использования constructorвместо ngOnInit, вполне возможно, что такой вариант использования существует.

Насколько я понимаю, чтобы унаследовать от базового класса, вам сначала нужно создать его экземпляр. Чтобы создать его экземпляр, вам необходимо передать необходимые параметры его конструктору, таким образом, вы передаете их от дочернего элемента к родительскому через вызов super (), так что это имеет смысл. Инжектор, конечно, еще одно жизнеспособное решение.

Если родительский класс был получен из стороннего плагина (и вы не можете изменить источник), вы можете сделать это:

import { Injector } from '@angular/core';

export MyComponent extends AbstractComponent {
  constructor(
    protected injector: Injector,
    private anotherService: AnotherService
  ) {
    super(injector.get(MyService));
  }
}

или лучший способ (оставьте только один параметр в конструкторе):

import { Injector } from '@angular/core';

export MyComponent extends AbstractComponent {
  private anotherService: AnotherService;

  constructor(
    protected injector: Injector
  ) {
    super(injector.get(MyService));
    this.anotherService = injector.get(AnotherService);
  }
}

Уродливый взлом

Некоторое время назад некоторые из моих клиентов хотят присоединиться к двум БОЛЬШИМ проектам angular ко вчерашнему дню (angular v4 в angular v8). Project v4 использует класс BaseView для каждого компонента и содержит tr(key)метод перевода (в v8 я использую ng-translate). Поэтому, чтобы избежать переключения системы переводов и редактирования сотен шаблонов (в v4) или настройки двух систем перевода параллельно, я использую следующий уродливый хак (я не горжусь этим) - в AppModuleклассе я добавляю следующий конструктор:

export class AppModule { 
    constructor(private injector: Injector) {
        window['UglyHackInjector'] = this.injector;
    }
}

и теперь AbstractComponentвы можете использовать

export class AbstractComponent {
  private myservice: MyService = null;

  constructor() {
    this.myservice = window['UglyHackInjector'].get(MyService);
  }
}