Двусторонняя передача данных

Question

У меня есть 2 компонента: AppComponent и ChildComponent. ChildComponent является дочерним компонентом AppComponent. Как отправить измененную "variable1" из ChildComponent обратно в AppComponent?

AppComponent [html]:

<child [variable1]="variable1">PARENT</child>

AppComponent [ts]:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  variable1: string = 'abc';
}

ChildComponent [ts]:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input('variable1') variable1: string;

  ngOnInit() {
    this.variable1 = this.variable1 + 'def';
  }
}

Answer 1

Вы можете сделать это с EventEmitter а также @Output и пометка двухсторонней привязки в вашем дочернем теге. Итак, ваш дочерний тег добавляет двустороннюю привязку:

<child [(variable1)]="variable1">PARENT</child>

у вашего ребенка отметьте этот источник событий именем переменной и суффиксом Change (важно для двусторонней привязки к работе!)

@Input() variable1: string;
@Output() variable1Change = new EventEmitter<string>()

и всякий раз, когда вы хотите передать изменение переменной в parent, в child do:

this.variable1Change.emit('my new value')

Заметьте, что я удалил псевдоним из вашего @Input это основано на руководстве по стилю документов: https://angular.io/guide/styleguide

Answer 2

Я мог бы немного опоздать, но это еще проще: используйте viewChildren:

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

@ViewChild('child') child: ChildComponent;
// ...
this.myVariable = this.child.variable1;

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

<child #child>PARENT</child>

дочерний компонент TS:

variable1 = '';
// ... 
this.variable1 = 'Hello world';

Answer 3

Ниже приведен пример взаимодействия между родителями и потомками и взаимодействия между родителями. Вы также можете попробовать здесь

app.component.ts - родительский компонент

import { Component, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //passing values from parent to child
  master = "child";

  //Getting value from child
  childToParent(name){
    this.master=name;
  }

}

app.component.html - HTML родительского компонента

<div>
  <span>Master to Child </span><input type="textbox" [(ngModel)]='master'>
</div>

<app-child [master]=master (childToParent)="childToParent($event)"></app-child>

app-child.component.ts - дочерний компонент

import { Component, Input, Output,EventEmitter } from '@angular/core';



@Component({
  selector: 'app-child',
  template: `
    <input type="textbox" [(ngModel)]='masterName'>
    <button (click)="sendToParent(masterName)" >sendToParent</button>
  `
})
export class AppChildComponent {
  //getting value from parent to child
  @Input('master') masterName: string;

  @Output() childToParent = new EventEmitter<String>();

  sendToParent(name){
    this.childToParent.emit(name);
  }
}