Βιβλίο
Υποενότητα 14.1: Angular και Reactive programming - Πρακτική
Υποενότητα 14.1: Angular και Reactive programming - Πρακτική
Ενημέρωση Υπηρεσιών
Ανοίξτε τοn dish.service.ts
και ενημερώστε τις μεθόδους του ως εξής:
...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
...
@Injectable()
export class DishService {
constructor() { }
getDishes(): Observable<Dish[]> {
return Observable.of(DISHES).delay(2000);
}
getDish(id: number): Observable<Dish> {
return Observable.of(DISHES.filter((dish) => (dish.id === id))[0]).delay(2000);
}
}
Δείτε :
- Την εισαγωγή
{ Observable } from 'rxjs/Observable';
-
- Tην εισαγωγή μερικών τελεστών - operators που χρειαζόμαστε στην υπηρεσία dish service. Χρησιμοποιούμε αυτούς τους τελεστές μόνο για να ελέγξουμε ότι τα παρατηρήσιμα λειτουργούν.
-
import 'rxjs/add/operator/delay'
import 'rxjs/add/observable/of'
Επίσης, ενώ δοκιμάζετε τα observables πρέπει να λάβετε υπόψη τα παρακάτω:
-
- Αν θέλετε να εκπέμπεται μόνο μία τιμή από το Observable, θα χρησιμοποιήσετε τη μέθοδο
of
και αυτό θα πάρει οποιαδήποτε value από εκεί. - Η καθυστέρηση
delay(2000)
θέλουμε να καθυστερήσουμε την εκπομπή της τιμής κατά δύο δευτερόλεπτα - Το
Observable<Dish[]>
στην μέθοδο getDishes. Επιστρέφει Observables μιας Dish array αντί για την ίδια την Dish array. Θα τροποποιήσουμε την υπηρεσία για να επιστρέψει Observables, και θα ενημερώσουμε τις components για να χρησιμοποιούν τα Observables. Ο λόγος είναι ότι όταν αναβαθμίζουμε τις υπηρεσίες μας για να χρησιμοποιήσουμε την υπηρεσία HTTP και να μεταβούμε σε διακομιστή για να φέρουμε τα δεδομένα, στο Angular, οι HTTP methods επιστρέφουν Observables. Και οι υπηρεσίες μπορούν απλά να περάσουν τα Observables στις components, να τους επιτρέψουν να εγγραφούν σε αυτά και να χρησιμοποιήσουν τα δεδομένα που έλαβαν. - Τη
return Observable.of(DISHES)
για την επιστροφή των Dishes.
- Αν θέλετε να εκπέμπεται μόνο μία τιμή από το Observable, θα χρησιμοποιήσετε τη μέθοδο