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 :
|
1 2 3 4 5 6 7 8 |
import { Injectable } from '@angular/core'; @Injectable() export class DataService { constructor() { } } |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export class DataService { constructor() { } cars = [ 'Ford','Chevrolet','Buick' ]; myData() { return 'This is my data, man!'; } |
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:
|
1 |
import { DataService } from './data.service'; |
Selanjutnya, di dalam constructor, kita harus mengimpornya melalui dependency injection :
|
1 2 3 4 5 6 7 |
export class AppComponent { constructor(private dataService:DataService) { } } |
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.
|
1 2 3 4 5 6 7 |
someProperty:string = ''; ngOnInit() { console.log(this.dataService.cars); this.someProperty = this.dataService.myData(); } |
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:
|
1 2 3 4 5 6 7 8 |
@Component({ // Other properties removed template: ` <p>{{ someProperty }}</p> ` }) |
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.