Как передать данные от ребенка к родителю в Angular 7

Question

У меня есть ts-файл app.component.ts, в котором есть логическая переменная «flag», я создал компонент с именем dialog, мне нужно установить переменную из app.component.ts из dialog.ts.

Я видел, что это возможно с помощью EventEmmitter, но почему-то это не работает для меня.

@Output() selectionDialogEvent=new EventEmitter<boolean>();
this.selectionDialogEvent.emit("true"); 

В родительском я пытаюсь

getSelectionDialogEvents($event){
    console.log("Event received"+$event);
   this.chat=flag;
  } 

Answer 1

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

app-parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

app-child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hello World!"

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

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

Answer 2

Вы должны прослушать событие, когда вы вызываете дочерний компонент. И когда событие инициируется, вызовите вашу функцию в родительском компоненте.

<app-child (selectionDialogEvent)=getSelectionDialogEvents($event)></app-child>

, где $ events будет содержать данные, переданные вашим эмиттером selectionDialogEvent