Вот пример взаимодействия родитель-потомок, в консоли мы увидим, что изменилось значение из дочернего объекта переданного объекта из родительского.
Родительский компонент:
import { Component, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<child [childProp]="parentProp" (childPropChange)="fromChild($event)"></child>
`
})
export class AppComponent implements OnChanges {
parentProp = {value1: "value1", value2: "value2"};
ngOnChanges(c: SimpleChanges) {
console.log('Parent changes: This doesnt happen often ', c);
}
fromChild(val) {
console.log('Parent: receive from child, ', val.value1);
console.log('Parent: receive from child, ', val.value2);
console.log('Parent: receive from child, ', this.parentProp.value1);
console.log('Parent: receive from child, ', this.parentProp.value2);
}
}
Дочерний компонент:
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'child',
template: `
<h3>Child Component with {{childProp}}</h3>
<button (click)="fire()">Talk to parent</button>
`
})
export class ChildComponent implements OnChanges {
@Input() childProp;
@Output() childPropChange = new EventEmitter<{}>();
ngOnChanges(changes: SimpleChanges) {
console.log('in child changes with: ', changes);
}
fire() {
this.childProp.value1 = "value1 changed";
this.childProp.value2 = "value2 changed";
this.childPropChange.emit(this.childProp);
}
}
Вы можете увидеть результат в Этот стекblidtz
В родительском компонентеу нас есть этот объект:
parentProp = {value1: "value1", value2: "value2"};
В дочернем компоненте мы заменяем полученный объект от родительского и выводим значение следующим образом:
this.childProp.value1 = "value1 changed";
this.childProp.value2 = "value2 changed";
this.childPropChange.emit(this.childProp);
Этот результат можно увидеть в консоли:
Parent: receive from child, value1 changed
Parent: receive from child, value2 changed
Parent: receive from child, value1 changed
Parent: receive from child, value2 changed