Представляю вашему вниманию типичные варианты использования 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);
}