// child.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
...
})
export class ChildComponent {
// ...
// Создаём EventEmitter, который будет производить событие change у компонента
// вместо change можно дать любое имя событию. В этом примере мы передаём число
// но можно передавать любые данные
@Output()
change: EventEmitter<number> = new EventEmitter<number>();
// ...
// Где-то в коде вызываем this.change.emit(данные); для того чтоб
// передать данные наверх
doChange() {
this.change.emit(123);
}
}
// parent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<div class="app">
Parent: {{ value }}
<app-child
<!--
вот так мы получаем данные из дочернего компонента.
данные события хранятся в специальной переменной $event.
-->
(change)="this.setValue($event)">
</counter>
</div>
`
})
export class AppComponent {
value: number = 10;
setValue(value) {
this.value = value;
}
}
将数据从子组件传递到父组件称为“事件”或“事件反应”。事件是使用
@Output和EventEmitter在子组件中创建的，对事件的订阅发生在父组件中。这里有更多细节。