У мене є набір компонентів 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.thoughtram.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, але цілком можливо, що такий варіант використання існує.

Якщо батьківський клас отримано від сторонніх плагінів (і ви не можете змінити джерело), ​​ви можете зробити це:

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

З того, що я розумію, для того, щоб успадкувати базовий клас, спочатку потрібно створити його. Для того, щоб створити його екземпляр, вам потрібно передати необхідні параметри його конструктора, таким чином ви передаєте їх від дочірнього до батьківського через виклик super (), щоб це мало сенс. Інжектор, звичайно, ще одне життєздатне рішення.

ПОРТИЙ ЗЛОМ

Деякий час тому хтось із моїх клієнтів хоче приєднати два великі кутові проекти до вчорашнього дня (angular v4 into angular v8). Проект v4 використовує клас BaseView для кожного компонента і містить tr(key)метод перекладу (у v8 я використовую ng-translate). Тому, щоб уникнути перемикання системи перекладів та паралельного редагування сотень шаблонів (у v4) або паралельної установки 2 системи перекладу, я використовую наступний потворний хак (я цим не пишаюся) - у 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);
  }
}