Angular — обмен данными между компонентами | Кодементор

Angular — популярный фреймворк для разработки одностраничных веб-приложений. Я здесь объясню вам, как вы можете обмениваться данными между компонентами. Но перед этим нам нужно понять типы отношений между компонентами

Типы отношений между компонентами

  • Отношения родителей и детей
  • Отношения ребенка к родителю
  • родственные отношения
  • Нет связи между компонентами

Отношения родителей и детей —
Отношения «родитель-потомок» — один из наиболее распространенных и простых способов обмена данными. Он работает с помощью @Input()декоратор чтобы разрешить передачу данных через шаблон.

Вот пример обмена данными между родительскими и дочерними элементами с использованием декоратора @Input().

Демонстрация общения родителей с детьми

Отношения между ребенком и родителями —

Когда нам нужно передать данные от дочернего к родительскому, нам придется использовать декоратор ViewChild(), чтобы получить ссылку на дочерний компонент и передать данные от дочернего к родительскому. Во-первых, вы можете передавать данные от дочернего к родительскому после инициализации дочернего представления. Это означает, что нам нужно реализовать хук жизненного цикла AfterViewInit для получения данных от дочернего элемента.

Вот пример

Родственные отношения —

одноуровневый компонент может обмениваться данными между двумя вышеприведенными отношениями дочерний-родительский и родительский-дочерний. Child1 отправляет данные в родительский компонент, а затем родитель отправляет данные в компонент Child2

Нет связи между компонентами —

Когда между компонентами нет связи, в это время вам нужно использовать Сервис для обмена данными между
Вот пример.

Спасибо за чтение! Нажми кнопку Нравится, если тебе понравился мой пост! Удачного кодирования 😃

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *