[英]how to use EventEmitter in angular7
我在一個文件中定義了我的組件,我想在父函數中向子組件發送數據表單父組件工作正常但 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");
}
參考您的堆棧閃電戰,一切都可以進行一些更改。
您必須在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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.