Angular 2 - Layanan

Layanan digunakan ketika fungsionalitas umum perlu disediakan untuk berbagai modul. Misalnya, kami dapat memiliki fungsionalitas database yang dapat digunakan kembali di antara berbagai modul. Dan karenanya Anda dapat membuat layanan yang dapat memiliki fungsionalitas database.

Langkah-langkah kunci berikut perlu dilakukan saat membuat layanan.

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. Berikut adalah langkah-langkahnya.

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

Hal-hal 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 - Di file app.component.ts, tempatkan kode berikut.

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

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

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

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

Hal-hal berikut perlu diperhatikan tentang program di atas.

• Pertama, kita mengimpor modul appService kita 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.

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.