Передача данных в Angular приложении
Одна из самых распространенных задач при разработке — передача данных.
Хочу рассказать о том, что применяю сама при разработке. То есть ниже не теория со всеми нюансами, а скорее кейсы из разработки проекта — этакая шпаргалка 🙂
От родительского компонента в дочерний
Тут возможен вариант, когда нужно прокинуть стринговые данные либо другой формат.
В первом случае никаких скобок не нужно, например, ниже мы передаем так заголовок:
А вот сами слайды являются массивом, так что мы даем Angular знать об этом через [].
В дочернем и то и то получаем через директиву @Input:
Впрочем, бывает еще случай, когда данные из родительского могут измениться и нам это нужно отследить, чтобы должным образом отреагировать в дочернем. На сцену выходит ngOnChanges. Это один из хуков(hook) жизненного цикла компонента. Соответственно срабатывает, когда значение в родительском меняется:
От дочернего к родительскому отправляем данные через события (Output).
Например, у нас внутри компонента слайдера есть подкомпонент — навигация. И при клике по элементу навигации мы должны сообщить в родительский компонент, что это событие произошло. Добавляем к селектору дочернего компонента событие, которое в родительском будет срабатывать в ответ на клик в дочернем:
А в дочернем вызываем это событие череp emit().
А когда сервис?
Есть ли же дело идет просто о совершенно не связанных иерархически компонентах или о разных сервисах, то тут уже используется общий Service.
Также я задумываюсь о сервисе когда данных, которые приходится пробрасывать от компонента к компоненту становится много. Все-таки передача данных через Input и Output не так уж легко читается, а значит проект сложнее поддерживать.
И наконец последний и , пожалуй, самый сложный случай — передача изменяющихся данных, которые нужны в совершенно разных частях приложения. А про это у меня целый пост Angular-redux в примерах.
Метод работает и популярен и понынче, особенно в проектах где нет необходимости применять редакс. Как вариант, отслеживание динамических данных — либо прокидывание обзервера/сабджекта в компонент, либо делать вызов сервиса на получение данных непосредственно в компоненте, таким образом, компонент будет независим от родителя и сервис будет инжектироваться в одном месте, а не в каждой родительской компоненте для одного и того же дочернего компонента. Также возможны различные инпут вызовы, в которых можно вызывать метод на получение данных (например работа компоненты с поддержкой фильтрации, при изменении параметров отправляется новый запрос)