Pada tutorial kali ini saya akan membahas kelanjutan dari artikel sebelumnya yang mana saya telah membahas tentang membuat service pada angular , nah untuk kali ini saya akan membahas kelanjutnyanya yaitu Cara Menggunakan Service Pada Angular 4.

Working with the Service File

Sekarang lihat yang telah di buat angular CLI :

Ini terlihat cukup mirip dengan komponen, kecuali bahwa itu mengimpor sebuah Injectable . Dekorator yang Injectable memancarkan metadata yang terkait dengan layanan ini, yang memungkinkan angular mengetahui apakah perlu inject dependensi lain ke layanan ini.

Kami tidak akan malakukan injecting dependensi ke service pada contoh sederhana kita di sini, namun disarankan untuk membiarkan dekorator Injecteble untuk pemeriksaan di masa depan dan memastikan konsistensi. Tapi Anda bisa menyingkirkan garis 1 dan 3 dan service:

mari kita buat sebuah array pada service kita :

Sebagaimana anda lihat kita telah membuat simple array dan method dengan nama myData() yang mana method tersebut mengembalikan sebuah string.
lalu bagaimana cara kita mengakses property dan method tersebut dari commponent yang lain ? simple

Using Services in Components

Pertama-tama kita perlu mengimport service pada bagian atas di file app.component.ts:

Selanjutnya, di dalam constructor, kita harus mengimpornya melalui dependency injection :

Sekarang kita bisa menggunakan dataService untuk mengakses properti dan metode yang terkait dengannya. Di bawah constructor () {}, mari tambahkan penguncian siklus ngOnInit (), yang berjalan saat komponen dimuat.

Pertama, kita melakukan konsol untuk array cars, lalu kita binding beberapa properti ke method myData yang kita definisikan di dalam service. Lalu Di properti template dari @Component () dekorator, tambahkan:

Sekarang, jalankan konsol ng serve di folder proyek, dan Anda harus melihat konsol Anda dariarray cars yang kita definisikan, bersama dengan string, ‘This is my data, man!’ Kita kembalikan di dalam method myData ().

Kesimpulan

Jadi, ini singkatnya adalah bagaimana service pada angular  bekerja. sehingga Anda dapat  membuat service yang spesifik untuk satu tujuan, yang mana  dapat digunakan kembali di beberapa komponen di aplikasi angular anda.