Типичное использование Observable объектов в Angular 4
5 мин
Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.
Подписка на параметр роутера и мапинг на другой Observable
Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.
Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.
// UserDetailsComponent
ngOnInit() {
this.route.params
.pluck('userId') // получаем userId из параметров
.switchMap(userId => this.userService.getData(userId))
.subscribe(user => this.user = user);
}
