Эта статья написана для Angular 2+ . На момент написания последней версией была Angular 4.
Обновление (июнь 2019 г.): все еще актуально для Angular 8
Он написан для новичков - если вы продвинутый или средний разработчик Angular, вы, вероятно, уже знаете все эти методы.
Изменить: хотя название этой статьи немного вводит в заблуждение, потому что мы не хотим напрямую связываться между компонентами. Наши компоненты должны быть изолированы и инкапсулированы. Я выбрал это название, потому что думаю, что разработчики, борющиеся с этим, будут искать в Google именно так.
Как общаться между компонентами? Это та тема, с которой мне приходится сталкиваться многим новым разработчикам Angular. Я покажу вам три наиболее распространенных подхода с примерами, которые подходят для разных вариантов использования.
Существует также «способ сокращения», о котором я мог бы рассказать в другой статье в будущем.
Представьте себе вариант использования, когда в вашем приложении есть боковая панель. Боковая панель может быть открытой или закрытой. У вас есть компонент боковой панели, а затем у вас есть компонент (или несколько компонентов), который может открывать / закрывать его или запрашивать его состояние.
Я опишу три способа реализации этого поведения
- Передача ссылки одного компонента на другой
- Связь через родительский компонент
- Связь через Сервис
В каждом из этих примеров есть демонстрационное приложение с проверками кода в StackBlitz и репозитории github.
1. Передача ссылки одного компонента на другой
Это решение следует использовать, когда компоненты имеют зависимость между собой. Например, переключение раскрывающегося и раскрывающегося списка. Обычно они не могут существовать друг без друга.
Мы создадим компонент переключения боковой панели, который будет иметь компонент боковой панели в качестве входных данных, и, нажав кнопку переключения, мы откроем / закроем компонент боковой панели.
Вот соответствующий код:
Импорт опущен в коде TypeScript.
2. Связь через родительский компонент
Может использоваться, когда легко управлять общим состоянием между компонентами через их родительский компонент, и вам не хочется создавать новую службу или какой-то шаблонный код из-за одной переменной.
Реализация этого подхода практически не отличается от предыдущего. Однако переключатель боковой панели не получает компонент боковой панели. Вместо этого родительский компонент содержит свойство sideBarIsOpened, которое мы передали компоненту боковой панели.
Импорт опущен в коде TypeScript.
3. Связь через службу
Наконец, этот параметр полезен и должен использоваться, когда у вас есть управляемый компонент или его состояние запрашивается из нескольких экземпляров.
Теперь у нас есть несколько мест в приложении, которым потребуется доступ к нашему компоненту боковой панели. Посмотрим, как мы это сделаем.
Теперь мы создадим side-bar.service.ts, чтобы у нас было:
- side-bar.service.ts
- side-bar.component.ts
- side-bar.component.html
Сервисы боковой панели будут иметь метод переключения и событие изменения, поэтому каждый компонент, который будет внедрять эту службу, может быть уведомлен о том, что панель была открыта, или может переключить ее.
В этом примере ни компонент боковой панели, ни компонент переключения боковой панели не имеют входных параметров, потому что они обмениваются данными через службу.
Теперь код:
Импорт опущен в коде TypeScript.
Если у вас есть другой способ сделать это или у вас возникнут проблемы с приведенными выше примерами, дайте мне знать в комментариях.
Не забудьте подписаться на меня здесь, на Medium, чтобы увидеть больше статей по JavaScript / Angular.
Вы можете связаться со мной в Твиттере. Я буду публиковать самые интересные ресурсы из мира JavaScript.
Мы также всегда ищем увлеченных и талантливых разработчиков удаленного программного обеспечения. Если вы хотите узнать больше, вы можете связаться со мной на моем веб-сайте или написать мне в Twitter.
Другие статьи, которые могут вас заинтересовать:
Назад к корням: значение JavaScript против эталона
Давайте посмотрим на концепцию« ценность против эталона . Каждый разработчик JavaScript должен знать эту тему, поскольку часто это… medium.com »
