角度：对话框返回值

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

从文档中： https：//material.angular.angular.io/components/dialog/overview

在对话框组件中，您需要调用关闭方法传递返回数据：

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

更改[mat-dialog-close] to（click）=“ collectialog（）”，该=“ cleastialog（）”，该函数会调用上述函数，并查看是否有效

Answer 2

您不会实例化和更改myMessage的价值，因此当您使用myMessage变量关闭对话框时，它具有虚假的价值

尝试以这种方式使用ngmodle [（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
      }
    });
}