Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.



![][1]



## Подписка на параметр роутера и мапинг на другой Observable {#podpiska-na-parametr-routera-i-maping-na-drugoy-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);
}
![][2] [Читать дальше →][3]

[1]: https://habrastorage.org/web/957/c53/6ac/957c536acad345318908516464231f02.jpg
[2]: https://habrastorage.org/web/134/b43/856/134b438568384f58bcc1d7476bd501ed.jpg "говорят, что статьи с двумя картинками на до ката получают больше просмотров"
[3]: https://habrahabr.ru/post/337512/?utm_source=habrahabr&utm_medium=rss&utm_campaign=feed_posts#habracut