Angular:从dialog返回值

Question

我想从对话框中返回一个字符串，特别是消息变量到主组件，但它不起作用。

console.log(res)命令根本不起作用。

我做错了什么?

代码如下:

主组件TS代码:

openSendMessageDialog(element: any){
this.dialogService.openSendMessageDialog(element.buyer)
.afterClosed().subscribe(res =>{
if(res){
console.log(res)  //Message
}
});
}

对话服务TS代码:

openSendMessageDialog(msg: any){
return this.dialog.open(DialogMessageComponent,{
width: '500PX',
panelClass: 'confirm-dialog-container',
disableClose: true,
data :{
message : msg
}
});

}

对话框消息TS代码:

import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatConfirmDialogComponent } from '../mat-confirm-dialog/mat-confirm-dialog.component';
@Component({
selector: 'app-dialog-message',
templateUrl: './dialog-message.component.html',
styleUrls: ['./dialog-message.component.css']
})
export class DialogMessageComponent implements OnInit {
myMessage:string;
username: string;  
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<MatConfirmDialogComponent>) { 
}
ngOnInit(): void {
console.log(this.data)
this.username = this.data.message
}

}

对话框消息HTML代码:

<h1 mat-dialog-title>Send a message</h1>
<div mat-dialog-content>
<!-- USER NAME -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Reciepent username</mat-label>
<input matInput [ngModel]="username" placeholder="Enter name" readonly>
</mat-form-field>
</div>
<!-- MESSAGE -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Message(Max. 100 chars limit)</mat-label>
<textarea  matInput [maxLength]="100" [ngModel]="myMessage" placeholder="Enter message"></textarea>
</mat-form-field>
</div>
</div>
<div mat-dialog-actions>
<button type="button" class="btn btn-success btn-lg btn-block" [mat-dialog-close]="myMessage">Send</button>
</div>

Answer 1

from documentation: https://material.angular.io/components/dialog/overview

在对话框组件中，你需要调用close方法传递返回数据:

closeDialog() {
this.dialogRef.close('Pizza!');
}

change [mat-dialog-close] to (click)="closeDialog()"它将调用上面的函数，看看是否有效

Answer 2

你没有实例化和改变myMessage的值，所以当你关闭myMessage变量的对话框时，它的值是假的

尝试这样使用ngModel[(ngModel)]

所以你的Html变成:

.
.
<!-- MESSAGE -->
<div class="form-group">
<mat-form-field appearance="outline">
<mat-label>Message(Max. 100 chars limit)</mat-label>
<textarea  matInput [maxLength]="100" [(ngModel)]="myMessage" placeholder="Enter message"></textarea>
</mat-form-field>
</div>

并且在任何条件之前尝试console.log。

openSendMessageDialog(element: any){
this.dialogService.openSendMessageDialog(element.buyer)
.afterClosed().subscribe(res =>{
console.log(res)
if(res){
// any logic
}
});
}