Компоненты являются жизненно важной частью любого углового приложения, поскольку они позволяют нам соединять данные и представление. Во время разработки необходима связь между двумя компонентами, чтобы можно было поддерживать состояние. Потому что управление состоянием в angular немного сложно, но оно значительно служит цели. Общение может осуществляться тремя способами:
Связь между родителем и дочерним элементом с использованием декоратора @Input
После определения общего свойства в дочернем компоненте с помощью декоратора @Input мы передадим то же свойство в качестве атрибута в дочернем селекторе.
Атрибут будет объявлен в дочернем селекторе и ему будут присвоены обновленные значения. Всякий раз, когда происходит какое-либо обновление переменной состояния, дочерний компонент обновляется автоматически. Значение может быть любого типа переменной JavaScript.
Вы можете редактировать код на Stackblitz по адресу https://stackblitz.com/edit/angular-p77ayg.
Второй тип
Второй тип связи - между дочерним элементом и родителем с использованием декоратора @Output. Дочерний компонент будет передавать данные через экземпляр EventEmitter, он примет один параметр данных и передаст их родительскому компоненту. Класс EventEmitter будет импортирован из модуля @angular/core.
В родительском компоненте нам просто нужно добавить событие этого EventEmitter в дочерний селектор и назначить его методу с параметром $event. Как только мы получим данные, мы можем обновить значения в шаблоне.
Внедрение компонентов может быть обеспечено с помощью @angular/cli, который автоматически внедряется в app.module.ts.
Вы можете посетить URL-адрес https://angular-exwkcd.stackblitz.io для вывода и поиграть с приложением на https://stackblitz.com/edit/angular-exwkcd.
Я должен написать еще один пост, чтобы уточнить связь между отдельными или родственными компонентами. Который может быть немного длиннее, чем этот пост.
