Angular 6 - MatDialog - EventEmitter - 从 MatDialog 将对象共享给父组件答案

【问题标题】：Angular 6 - MatDialog - EventEmitter - share object to parent component from MatDialogAngular 6 - MatDialog - EventEmitter - 从 MatDialog 将对象共享给父组件
【发布时间】：2019-09-25 02:21:01
【问题描述】：

现在能够在两个组件之间进行通信。但不知道如何通过事件发射器将用户（选定）输入的值作为对象从 MatDialog 组件传递给父组件。这里我想在单击提交按钮后将选定的选项值和文本区域值作为对象传递。

dialog.html

          <mat-select [(ngModel)]="selectedIssue"  [ngModelOptions]="{standalone: true}">
            <mat-option  [value]="option1">Option AA</mat-option>
            <mat-option  [value]="option2">Option BB</mat-option>
            <mat-option  [value]="option3">Option CC</mat-option>
            <mat-option  [value]="option4">Option DD</mat-option>
            <mat-option  [value]="option5">Option EE</mat-option>
          </mat-select>


         <div>
            <textarea class="mention-reason" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}"></textarea>
        </div>

    <button class="cancel" matDialogClose>Cancel</button>      
    <button class="submit" [mat-dialog-close] (click)="submitUserReason()">Submit</button></span>

dialog.ts

onSubmitReason = new EventEmitter();
    submitUserReason(): void {
        this.onSubmitReason.emit('hello');
    }

    onConfirmClick(): void {
        this.dialogRef.close(true);     
    }

parent.ts

callSupport() {
        const dialogRef = this.dialog.open(customerSupportComponent);
        const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
          console.log('dialog data', data);
          //i can see 'hello' from MatDialog
        });

    dialogRef.afterClosed().subscribe(result => {      
      subscribeDialog.unsubscribe();
    });

非常感谢帮助的人。

【问题讨论】：

标签： javascript angular typescript angular-material eventemitter

【解决方案1】：

我假设有两个按钮。 1) 提交 2) 关闭

所以，如果你想在提交按钮点击父组件中选择数据，那么，

submitUserReason(): void {
   this.dialogRef.close({ option: userSelectedOption, reason:userReason });
}

在父组件中，

dialogRef.afterClosed().subscribe(result => {
console.log(result);
});

【讨论】：

【解决方案2】：

在您的 dialog.ts 中，您希望传递您选择的选项，而不仅仅是一个字符串。比如：

submitUserReason(): void {
   this.onSubmitReason.emit(selectedIssue);
}

您可以发出任何您想要的内容（取决于您输入内容的方式），因此如果您想传递更多数据，您也可以传递一个对象：

submitUserReason(): void {
   let data = { issue : selectedIssue, reason: userReason};
   this.onSubmitReason.emit(data);
}

【讨论】：

但希望将 selectedIssue 和 textarea 值作为单个对象发送，例如 userValue{ option: userSelectedOption, reason:userReason }
在上面编辑了我的答案。
你们速度很快。刚刚找到解决方案。但无论如何感谢您的时间和精力。我只是和你提到的一样