如何在Angular 7中从子组件传递数据到父组件

Question

我有一个ts文件app.component.ts，其中有一个布尔变量"flag"，我创建了一个名为dialog的组件，我的需求是从dialog.ts设置来自app.component.ts的变量。

我看到可以通过EventEmitter实现这一点，但不知何故对我不起作用。

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

在父级中，我正在尝试

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

- Prashant Raghav

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)
  }
}

- Fernando Zamperin

Answer 2

父组件 HTML

<hello (ParentComponet)="ParentComponent($event)"></hello>

父组件 ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // First Make function

  ParentComponent(data) {
    console.console(data); // this data of child will show in parent console window 
  }
}

子组件 HTML

<button type="button" (click)="sendData()">Send Data P to Child</button>

子组件 TypeScript

import { Component , OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'hello',
  templateUrl:'hello-component.html'
})
export class HelloComponent  implements  OnInit {

  // Pass OutPut and EventEmitter
  @Output() ParentComponet:EventEmitter<any> = new EventEmitter()
  ngOnInit():void{
    
  } 

  // Make A function

  sendData(){
    this.ParentComponet.emit('Send Data Child to Parent')
    //emit is a function and you can pass the value
  }

}

- Muhammad Bilal

---

工作示例：https://stackblitz.com/edit/angular-pass-data-child-to-parent-component-stkuat?file=src%2Fapp%2Fhello.component.ts - undefined

Answer 3

你必须监听调用子组件的事件。当事件被触发时，在父组件中调用你的函数。

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

其中$events将保存由您的发射器selectionDialogEvent传递的数据

- Nicolas Aoki