Взаимодействие компонентов

В этом уроке Вы узнаете, как компоненты взаимодействуют в Angular, особенно родительские и дочерние компоненты.

Взаимодействие родительского и дочернего компонентов

Компонентам часто требуется обмениваться данными. Родительские компоненты могут передавать данные дочерним с помощью входных свойств.

Использование @Input()

Используйте декоратор @Input(), чтобы получать данные из родительского компонента:

@Input() userData: string;

Передача данных дочернему компоненту

В шаблоне родительского компонента передавайте данные с помощью привязки свойств:

<app-child [userData]="parentData"></app-child>

Связь дочернего компонента с родительским

Дочерние компоненты передают информацию родительским с помощью событий и декоратора @Output().

Использование @Output()

Создайте эмиттер событий, чтобы передавать данные от дочернего компонента родительскому:

@Output() dataEvent = new EventEmitter<string>();

Отправка событий

Отправляйте события из дочернего компонента:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Обработка событий в родительском компоненте

Обрабатывайте отправленные события в шаблоне родительского компонента:

<app-child (dataEvent)="handleEvent($event)"></app-child>

Итоги

Теперь Вы понимаете, как компоненты взаимодействуют через входы и выходы в Angular. Продолжайте практиковаться!