Сегодня я надеялся написать о проблеме, которая беспокоила меня, когда я недавно начал изучать Angular как новичок. (К вашему сведению, если вы новичок в Angular, я предлагаю получить базовое понимание, прежде чем читать эту статью :))
Как вы уже знаете, основным строительным блоком Angular являются компоненты. Проще говоря, Компоненты - это многократно используемые блоки «View», которые используются для создания приложения angular. Любое приложение angular будет содержать как минимум более одного компонента, в то время как сложное приложение может содержать сотни различных компонентов, что в конечном итоге приводит к созданию приложения. Как новичок, мне всегда было интересно, как эти компоненты «разговаривают» или взаимодействуют друг с другом.
Иерархия компонентов
Прежде чем перейти к взаимодействию с компонентами, позвольте мне сначала рассказать о том, как компоненты структурированы в Angular. Компоненты Angular структурированы в виде древовидной иерархии, что означает, что есть один корневой компонент, а внутри этого компонента может быть много дочерних компонентов. Эти дочерние компоненты также имеют дочерние компоненты и так далее. Точно так же существует целое дерево компонентов, когда мы рассматриваем определенное приложение Angular.
Когда мы смотрим на приведенное выше дерево компонентов, можно задаться вопросом, как родительский компонент взаимодействует с дочерним компонентом или как дочерний компонент отправляет определенное сообщение / данные родительскому компоненту. Например, подумайте, что родительский компонент должен установить переменную / свойство внутри дочернего компонента. Как мы можем этого добиться? Вот тогда и пригодится компонентная коммуникация.
Компонентная связь
Когда мы берем компонентное взаимодействие, два основных сценария:
- Родительский для дочернего потока данных
- От дочернего к родительскому потоку данных
Родительский для дочернего потока данных
Чтобы полностью понять эту концепцию родительского и дочернего, давайте создадим новое угловое приложение с двумя компонентами.
ng new TestApp ng generate component Fruits ng generate component Apple
После этого давайте создадим компонент "яблоко", дочерний компонент компонента "фрукты". Для этого мы должны поместить HTML-селектор яблока внутри фруктов и поместить фрукты внутрь компонента приложения.
Компонент внутри приложения,
<app-fruits> </app-fruits>
Внутри фруктового компонента
<app-apple> </app-apple>
Давайте немного изменим приложение, чтобы мы могли правильно продемонстрировать взаимодействие компонентов.
Предположим, что переменная var_3, которая находится внутри компонента яблока, должна быть установлена входом, который находится внутри компонента фруктов. Для этого нам понадобится поток данных от родительского компонента «Фрукты» к дочернему компоненту «Apple».
Для этого нам нужно установить эту переменную, настраиваемое свойство ввода тега ‹app-fruits›. Для этого команда Angular представила удобный декоратор «@Input». Свойство класса можно украсить с помощью «@Input», чтобы сделать его входным свойством этого определенного класса. Посмотрим, как это можно сделать.
Вот и все ! Теперь, если вы перейдете к компоненту фруктов и посмотрите на селектор компонента яблока внутри него, вы увидите настраиваемое свойство [var_3]!
Теперь установите пользовательский ввод, взятый из ngModel внутри, в качестве ресурса этого свойства.
<app-apple [var_3]="var_1"> </app-apple>
Вот результат,
Вы можете узнать больше об Angular Input Decorator здесь.
От дочернего к родительскому потоку данных
Теперь поговорим о том, как дочерний компонент может передавать свои данные родительскому компоненту. Для этого Angular представил декоратор «@Output», но он немного сложнее, чем «@Input».
Чтобы передать свои данные родительскому элементу, дочерний элемент должен сообщить родительскому элементу, что что-то изменилось. Для этого мы установили свойство вывода в типе EventEmmiter. Затем мы можем поймать это событие от родительского компонента и получить значение переданных данных. Посмотрим, как это делается.
Сначала объявите var_2 дочернего компонента как Output.
@Output() var_2 = new EventEmitter<string>();
Здесь вам нужно будет указать тип события в виде строки, поскольку мы перехватываем введенные слова, но его можно изменить в соответствии с вашим приложением.
Затем создайте метод для перехвата пользовательского ввода, который передается элементу ввода внутри дочернего шаблона, и используйте метод emit объекта EventEmmiter для выдачи этого значения.
Теперь, если вы посмотрите на селектор дочерних компонентов внутри родительского, вы увидите новое событие с именем var_2!
После этого вам просто нужно получить значение из этого события «var_2», которое вы только что создали из метода.
Готово! Вот окончательный результат.
Теперь вы знаете основы взаимодействия компонентов в Angular !!!
Вы должны помнить, что это только два основных метода взаимодействия компонентов. Существуют различные другие методы, такие как использование сервисов и т. Д. Мы поговорим о них в следующей статье.
Полный проект доступен на моем GitHub. :) Не стесняйтесь раскошелиться. Если у вас есть какие-либо вопросы, не стесняйтесь комментировать.
