Javascript 如何将日期从appcomponent.ts传递到dialog？

我正在尝试使用datepicker创建一个座位预订应用程序。最初，所有消息都显示在警报中，但我决定将它们移动到对话框中。 正如你比我更清楚的那样，要创建对话框，你必须创建一个新组件。问题是，我无法传递格式化日期的方法中第一个组件中捕获的日期。 我该怎么办

我附上相关代码

appcomponent.html：

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Prenota</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="this.datari.myFormattedDates" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()"  #picker> </mat-datepicker>
  </mat-form-field>

<h3 mat-dialog-title>{{dialogTitle}}</h3>
<div mat-dialog-content>
        {{dialogMessage}} 
</div>
<div style="float:right;margin:20px;">
  <input style="margin:0px 10px;" type="button" value="confirm" [mat-dialog-close]="true">
  <input type="button" value="cancel"  [mat-dialog-close]="false">
</div>

dialogcomponent.ts：

export class AppComponent implements OnInit {
  dateOfBirth = Date(); 
  pipe = new DatePipe('it-IT');
  currentDate = moment().format('DD/MM/YYYY');
  datari: MyConst = new MyConst(); 

openDialog(event) {
                //catch date
                this.dateOfBirth = event.value;
                //I format the date
                this.datari.myFormattedDates = this.pipe.transform(this.dateOfBirth, 'dd/MM/yyyy'); 
                // open dialog
                this.dialog.open(DialogComponent );
}

export class DialogComponent implements OnInit {

  dialogTitle = 'Parking';
  dialogMessage = 'do you want to book for' + '?' ;


  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {

  }

}

导出类DialogComponent实现OnInit{
dialogTitle=‘停车位’；
dialogMessage='是否要为'+'预订？'；
构造函数（公共对话框：MatDialog，公共对话框REF:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：any{}
恩戈尼尼特（）{
}
}

dialogcomponent.html：

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Prenota</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="this.datari.myFormattedDates" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()"  #picker> </mat-datepicker>
  </mat-form-field>

<h3 mat-dialog-title>{{dialogTitle}}</h3>
<div mat-dialog-content>
        {{dialogMessage}} 
</div>
<div style="float:right;margin:20px;">
  <input style="margin:0px 10px;" type="button" value="confirm" [mat-dialog-close]="true">
  <input type="button" value="cancel"  [mat-dialog-close]="false">
</div>

{{dialogTitle}
{{dialogMessage}}

---

非常感谢大家：）

您将能够通过

open

方法传递数据，如下所示：

this.dialog.open(DialogComponent, {
  data: { date: this.datari.myFormattedDates },
  // Others options
  // width: ...
  // height: ...
  // panelClass: ...
});

在对话框组件中：

constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: { data: any }) { }

ngOnInit() {
  console.log(this.data.date);
}

constructor（public dialog:MatDialog，public dialogRef:MatDialogRef，@Inject（MAT_dialog_DATA）公共数据：{DATA:any}{}
恩戈尼尼特（）{
console.log（this.data.date）；
}

---

请看

我在这里给出了完整的描述：