通过MAT DIALOG Angular将数据传递给功能

Question

我正在使用MAT Dialog，并且试图将带有对话框的表单数据的变量值传递给函数，我正在获取表单值，但没有变量值。参见附图：

通过按下按钮，我正在做两件事，我将任务ID的值分配给变量并打开对话框：

addSubtask(task){
  this.taskID = task._id;
  const dialogSubTaskRef = this.dialog.open(AddNewSubtaskDialog, {
    data{
     taskID: this.taskID,
     description: this.subtaskDescription,
     dueDate:     this.subtaskDuedate,
    }
  });

  dialogSubTaskRef.afterClosed().subscribe(data => {
      console.log("Subtask Dialog output:", data);
  }
}

如您所见，我正在尝试将taskID与对话框的data一起传递，但是当我将data登录到控制台时它不会显示。

如何将此变量值沿对话框表单值传递给函数？

感谢您的帮助！

Answer 1

也尝试一下...您忘记了:：key之间的value分隔符

data：value

const dialogSubTaskRef = this.dialog.open(AddNewSubtaskDialog, {
    data:{
      taskID: this.taskID,
      description: this.subtaskDescription,
      dueDate:     this.subtaskDuedate,
    }
});

Answer 2

看来这种方法行不通：

const dialogSubTaskRef = this.dialog.open(AddNewSubtaskDialog, {
    data{
      taskID: this.taskID,
      description: this.subtaskDescription,
      dueDate:     this.subtaskDuedate,
    }
});

但是这个可行：

const dialogConfig = new MatDialogConfig();

dialogConfig.data = {
    taskID: this.taskID,
    description: this.subtaskDescription,
    dueDate:     this.subtaskDuedate,
};

const dialogSubTaskRef = this.dialog.open(AddNewSubtaskDialog, dialogConfig);

因此，在对话框组件中，我可以这样做：

@Inject(MAT_DIALOG_DATA) public data: AddSubTaskDialogData) {
  this.id = data.subtaskID;
}

并按预期工作。