Angular — обмен данными между компонентами | Кодементор
Angular — популярный фреймворк для разработки одностраничных веб-приложений. Я здесь объясню вам, как вы можете обмениваться данными между компонентами. Но перед этим нам нужно понять типы отношений между компонентами
Типы отношений между компонентами
- Отношения родителей и детей
- Отношения ребенка к родителю
- родственные отношения
- Нет связи между компонентами
Отношения родителей и детей —
Отношения «родитель-потомок» — один из наиболее распространенных и простых способов обмена данными. Он работает с помощью @Input()декоратор чтобы разрешить передачу данных через шаблон.
Вот пример обмена данными между родительскими и дочерними элементами с использованием декоратора @Input().
Демонстрация общения родителей с детьми
Отношения между ребенком и родителями —
Когда нам нужно передать данные от дочернего к родительскому, нам придется использовать декоратор ViewChild(), чтобы получить ссылку на дочерний компонент и передать данные от дочернего к родительскому. Во-первых, вы можете передавать данные от дочернего к родительскому после инициализации дочернего представления. Это означает, что нам нужно реализовать хук жизненного цикла AfterViewInit для получения данных от дочернего элемента.
Родственные отношения —
одноуровневый компонент может обмениваться данными между двумя вышеприведенными отношениями дочерний-родительский и родительский-дочерний. Child1 отправляет данные в родительский компонент, а затем родитель отправляет данные в компонент Child2
Нет связи между компонентами —
Когда между компонентами нет связи, в это время вам нужно использовать Сервис для обмена данными между
Вот пример.
