Angular 6 -Matdialog- eventEmitter-共享Matdialog的母体组件的对象

Question

现在能够在两个组件之间进行通信。但是，不知道如何通过事件发射极从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();
    });

非常感谢任何帮助的人。

Answer 1

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

因此，如果您希望在parent component中选出的数据在提交按钮上单击，

，

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

和parent component，

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

Answer 2

在您的对话框中，您要传递所选选项而不仅仅是字符串。类似：

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

您可以发射任何想要的东西(取决于您输入的内容(，因此，如果您想传递更多数据，也可以通过一个对象：

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