Sudut 2 - Injeksi Ketergantungan

Injeksi ketergantungan adalah kemampuan untuk menambahkan fungsionalitas komponen pada waktu proses. Mari kita lihat contoh dan langkah-langkah yang digunakan untuk mengimplementasikan injeksi ketergantungan.

Step 1- Buat kelas terpisah yang memiliki dekorator injeksi. Dekorator yang dapat diinjeksi memungkinkan fungsionalitas kelas ini untuk diinjeksi dan digunakan dalam modul JS Angular.

@Injectable() 
   export class classname {  
}

Step 2 - Selanjutnya di modul appComponent atau modul tempat Anda ingin menggunakan layanan, Anda perlu menetapkannya sebagai penyedia di dekorator @Component.

@Component ({  
   providers : [classname] 
})

Mari kita lihat contoh bagaimana mencapai ini.

Step 1 - Buat ts file untuk layanan yang disebut app.service.ts.

Step 2 - Tempatkan kode berikut pada file yang dibuat di atas.

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

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Poin-poin berikut perlu diperhatikan tentang program di atas.

• Dekorator Injeksi diimpor dari modul sudut / inti.

• Kami membuat kelas yang disebut appService yang didekorasi dengan dekorator Injectable.

• Kami membuat fungsi sederhana yang disebut getApp yang mengembalikan string sederhana yang disebut "Hello world".

Step 3 - Dalam file app.component.ts tempatkan kode berikut.

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

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

Poin-poin berikut perlu diperhatikan tentang program di atas.

• Pertama, kami mengimpor modul appService kami di modul appComponent.

• Kemudian, kami mendaftarkan layanan sebagai penyedia di modul ini.

• Dalam konstruktor, kita mendefinisikan variabel yang disebut _appService dari tipe appService sehingga bisa dipanggil di mana saja dalam modul appComponent.

• Sebagai contoh, dalam lifecyclehook ngOnInit, kita memanggil fungsi getApp dari layanan dan menetapkan keluarannya ke properti nilai kelas AppComponent.

Simpan semua perubahan kode dan segarkan browser, Anda akan mendapatkan output berikut.