Saya memiliki satu set komponen angular2 yang semuanya harus mendapatkan layanan yang disuntikkan. Pikiran pertama saya adalah yang terbaik adalah membuat kelas super dan memasukkan layanan di sana. Salah satu komponen saya kemudian akan memperluas superclass itu tetapi pendekatan ini tidak berhasil.

Contoh yang disederhanakan:

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

Saya bisa menyelesaikan ini dengan menyuntikkan MyServicedalam setiap komponen dan menggunakan argumen itu untuk super()panggilan tetapi itu pasti semacam tidak masuk akal.

Bagaimana cara mengatur komponen saya dengan benar sehingga mereka mewarisi layanan dari kelas super?

Saya bisa menyelesaikan ini dengan menyuntikkan MyService di dalam setiap komponen dan menggunakan argumen itu untuk panggilan super () tapi itu pasti semacam tidak masuk akal.

Itu tidak masuk akal. Ini adalah cara kerja konstruktor dan injeksi konstruktor.

Setiap kelas yang dapat diinjeksi harus mendeklarasikan dependensi sebagai parameter konstruktor dan jika superclass juga memiliki dependensi, ini juga perlu dicantumkan dalam konstruktor subclass dan diteruskan ke superclass dengan super(dep1, dep2)panggilan tersebut.

Meneruskan injektor dan memperoleh ketergantungan sangat penting memiliki kerugian yang serius.

Ini menyembunyikan dependensi yang membuat kode lebih sulit dibaca.
Itu melanggar ekspektasi orang yang akrab dengan cara kerja Angular2 DI.
Ini merusak kompilasi offline yang menghasilkan kode statis untuk menggantikan DI deklaratif dan imperatif untuk meningkatkan kinerja dan mengurangi ukuran kode.

Solusi yang diperbarui, mencegah beberapa contoh myService dibuat dengan menggunakan injektor global.

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

Ini akan memastikan bahwa MyService dapat digunakan dalam semua kelas yang memperluas AbstractComponent tanpa perlu memasukkan MyService di setiap kelas turunan.

Ada beberapa kontra untuk solusi ini (lihat Komentar dari @ Günter Zöchbauer di bawah pertanyaan asli saya):

• Menyuntikkan injektor global hanya merupakan perbaikan bila ada beberapa layanan berbeda yang perlu disuntikkan di banyak tempat. Jika Anda hanya memiliki satu layanan bersama maka mungkin lebih baik / lebih mudah untuk memasukkan layanan itu ke dalam kelas turunan
• Solusi saya dan alternatif yang diusulkannya memiliki kelemahan yaitu membuat lebih sulit untuk melihat kelas mana yang bergantung pada layanan apa.

Untuk penjelasan yang ditulis dengan sangat baik tentang injeksi ketergantungan di Angular2 lihat posting blog ini yang sangat membantu saya untuk menyelesaikan masalah: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

Alih-alih memasukkan semua layanan secara manual, saya membuat kelas yang menyediakan layanan, misalnya, ia mendapatkan layanan yang disuntikkan. Kelas ini kemudian dimasukkan ke dalam kelas turunan dan diteruskan ke kelas dasar.

Kelas turunan:

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

Kelas dasar:

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

Kelas penyedia layanan:

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

Daripada memasukkan layanan yang memiliki semua layanan lain sebagai dependensi, seperti:

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

Saya akan melewatkan langkah ekstra ini dan cukup menambahkan suntikan semua layanan di BaseComponent, seperti:

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

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

Teknik ini mengasumsikan 2 hal:

1. Perhatian Anda sepenuhnya terkait dengan pewarisan komponen. Kemungkinan besar, alasan Anda mendapatkan pertanyaan ini adalah karena banyaknya kode non-dry (WET?) Yang perlu Anda ulangi di setiap kelas turunan. Jika Anda ingin memanfaatkan satu titik masuk untuk semua komponen dan layanan Anda, Anda perlu melakukan langkah tambahan.

2. Setiap komponen memperluas BaseComponent

Ada juga kerugiannya jika Anda memutuskan untuk menggunakan konstruktor dari kelas turunan, karena Anda perlu memanggil super()dan meneruskan semua dependensi. Meskipun saya tidak benar-benar melihat kasus penggunaan yang mengharuskan penggunaan constructoralih-alih ngOnInit, sangat mungkin bahwa kasus penggunaan seperti itu ada.

Dari apa yang saya pahami untuk mewarisi dari kelas dasar, pertama-tama Anda harus membuat instance-nya. Untuk membuatnya, Anda perlu meneruskan parameter yang diperlukan konstruktornya sehingga Anda meneruskannya dari anak ke orang tua melalui panggilan super () sehingga masuk akal. Injector tentu saja adalah solusi lain yang layak.

Jika kelas induk telah didapat dari plugin pihak ketiga (dan Anda tidak dapat mengubah sumbernya), Anda dapat melakukan ini:

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

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

atau cara yang paling baik (tetap hanya satu parameter dalam konstruktor):

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

HACK JELEK

Beberapa waktu lalu beberapa klien saya ingin bergabung dengan dua proyek sudut BESAR sampai kemarin (sudut v4 ke sudut v8). Project v4 menggunakan kelas BaseView untuk setiap komponen dan berisi tr(key)metode terjemahan (di v8 saya menggunakan ng-translate). Jadi untuk menghindari mengganti sistem terjemahan dan mengedit ratusan template (di v4) atau menyiapkan 2 sistem terjemahan secara paralel, saya menggunakan peretasan jelek berikut (saya tidak bangga) - di AppModulekelas saya menambahkan konstruktor berikut:

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

dan sekarang AbstractComponentAnda bisa menggunakan

export class AbstractComponent {
  private myservice: MyService = null;

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