Bagaimanakah saya boleh menyuntik perkhidmatan ke dalam perkhidmatan lain dalam Angular 2?

Menyuntik Perkhidmatan ke dalam Perkhidmatan Lain dalam Sudut 2 (Beta)

Perkhidmatan suntikan ke dalam komponen adalah mudah menggunakan penghias @Component. Walau bagaimanapun, menyuntik perkhidmatan di luar komponen menimbulkan cabaran.

Pernyataan Masalah

Dalam Angular 2, kami ingin mengelak daripada menyediakan perkhidmatan secara manual dalam perkhidmatan lain, seperti yang dilihat dalam coretan kod berikut:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

Penyelesaian

Penyelesaian melibatkan penggunaan penghias @Injectable pada perkhidmatan yang ingin kami suntik. Penghias ini menyediakan parameter pembina perkhidmatan untuk suntikan pergantungan.

Hierarki Penyuntik

Untuk memahami cara suntikan berfungsi, adalah penting untuk memahami konsep hierarki penyuntik:

• Penyuntik Aplikasi: Dikonfigurasikan menggunakan parameter kedua fungsi bootstrap.
• Penuntik Komponen: Dikonfigurasikan menggunakan atribut pembekal bagi komponen. Ia boleh merujuk pembekal yang ditakrifkan dalam penyuntik induk.

Apabila menyuntik perkhidmatan ke dalam komponen atau perkhidmatan lain, Angular2 mencari penyedia dalam susunan berikut:

1. Komponen Injector
2. AppComponent Injector
3. Application Injector

Perkongsian Pembekal

Hierarki penyuntik membenarkan perkongsian terkawal kejadian perkhidmatan :

• Pembekal peringkat aplikasi: Dikongsi merentas keseluruhan aplikasi.
• Pembekal peringkat komponen: Dikongsi dalam komponen, ia komponen kanak-kanak dan perkhidmatan yang terlibat dalam rantaian pergantungannya.

Contoh

@Injectable()
export class Service1 {
  constructor(service2:Service2) {
    this.service2 = service2;
  }

  getData() {
    return this.service2.getData();
  }
}

@Injectable()
export class Service2 {

  getData() {
    return [{ message: 'message1' }, { message: 'message2' }];
  }
}

Dalam contoh ini:

• Perkhidmatan1 bergantung pada Perkhidmatan2.
• Apabila menghidupkan Service1 dalam ChildComponent, Angular2 mula-mula mencari Service1 dalam penyuntik ChildComponent, kemudian dalam penyuntik AppComponent, dan akhirnya dalam penyuntik Aplikasi.
• Begitu juga, apabila menginstant Service2 dalam Service1, Angular2 mengikuti hierarki yang sama.
• Hierarki penyuntik dan kedudukan pembekal membenarkan perkongsian pergantungan yang fleksibel berdasarkan keperluan aplikasi.

Sumber

• [Panduan Suntikan Ketergantungan Hierarki Angular2](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html)
• [ Contoh Plunkr](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview)

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyuntik perkhidmatan ke dalam perkhidmatan lain dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!