如何在angular7中使用EventEmitter答案

【问题标题】：how to use EventEmitter in angular7如何在angular7中使用EventEmitter
【发布时间】：2019-09-20 14:07:12
【问题描述】：

我在一个文件中定义了我的组件，我想在父函数中将数据从父组件发送到子组件工作正常但 eventEmitter 不发出

这是我的组件文件有两个组件

import { Component, OnInit, Inject ,EventEmitter,Output} from '@angular/core';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
    name: string;
}

@Component({
    selector: 'app-new-time-register',
    templateUrl: './new-time-register.component.html',
    styleUrls: ['./new-time-register.component.scss']
})
export class NewTimeRegisterComponent implements OnInit {

    constructor(public dialog: MatDialog) { }

    ngOnInit() {
    }

    openDialog(modal:string): void {
        const dialogRef = this.dialog.open(RegisterDialog, {
            width: '480px',
            data: {name: modal}
        });
    }

    testEvent(value){
        console.log(value,"OOOOOOOOOOOOOOOOOOOO");
    }
}

@Component({
    selector: 'register-dialog',
    templateUrl: 'register-dialog.html',
    styleUrls: ['./new-time-register.component.scss']
})
export class RegisterDialog{

    constructor(
        public dialogRef: MatDialogRef<RegisterDialog>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
    showAllPersons: Boolean = false;
    onNoClick(): void {
        this.dialogRef.close();
    }

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

    testEventEmitter(){
        console.log('TTTTTTTTTTTTTTTTTT');
        this.testEmit.emit("Test EventEmitter");
    }
}

这是 register-dialog.html 文件

<span class="panel-title" (click)='testEventEmitter()'>Computicate Trial Account Manager</span>

这是我的孩子 app-new-time-register html 文件

<register-dialog (testEmit)='testEvent($event)'></register-dialog>

这是一个子组件

testEvent(value){
        console.log(value,"OOOOOOOOOOOOOOOOOOOO");
    }

【问题讨论】：

您想将数据从父母发送给孩子还是从孩子发送给父母？
send data form parent to child component 不确定你是否正确，@output 是给 child->parent 的。
EeshwarAnkathi 我想将数据从 register-dialog.html 发送到 app-new-time-register
你能像这样初始化@output 并告诉我它是否工作吗@Output() testEmit: EventEmitter = new EventEmitter();
控制台有错误吗？

标签： angular angular7 eventemitter

【解决方案1】：

参考您的 stackblitz，一切都只需稍作改动即可。

您必须在 app.module.ts 中添加RegisterDialog。

 declarations: [AppComponent, HelloComponent, RegisterDialog]

同样在 app.component.html 中，您必须将 $event 变量添加到发射器：

<register-dialog (testEmit)='checkEvent($event)'></register-dialog>

实例：

https://stackblitz.com/edit/angular-stack-55945887?file=src%2Fapp%2Fapp.component.html

【讨论】：