Angular 2 - передать объект из родительского в дочерний компонент для изменения - PullRequest
0 голосов
/ 09 октября 2018

Я знаю, что отправка объекта из родительского компонента в дочерний компонент так же проста, как отправка его через @ input.

В моем случае мне нужно отправить объект из родительского объекта его дочернему элементу и получить егоизменен на дочерней стороне и сразу же увидит это изменение на родительской стороне.

На самом деле я хочу отправить ссылку на объект дочернему объекту, а не его значение.

1 Ответ

0 голосов
/ 09 октября 2018

Вот пример взаимодействия родитель-потомок, в консоли мы увидим, что изменилось значение из дочернего объекта переданного объекта из родительского.

Родительский компонент:

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
...