如何显示从弹出组件到应用程序组件的用户选择？

Question

我有一个组件choose-emoji-dialog，当用户单击应用程序组件中的按钮时会弹出。我想在应用程序组件html文件中显示按钮的值，但似乎无法正确执行。我已经尝试过@Output，但是对我来说不起作用。

以下是我的弹出组件html文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h2 mat-dialog-title>Gateway</h2>
  <mat-dialog-content>Are you sure you want to proceed?</mat-dialog-content>
  <mat-dialog-actions>
    <button value = "Yes" (click) ="onSubmit($event)" md-icon-button class="btn btn-primary" mat-dialog-close>Yes</button>
  <span class="spacer"></span>
    <button value="No"  (click) ="onSubmit($event)" md-icon-button class="btn btn-danger" mat-dialog-close>No</button>
  </mat-dialog-actions>

以下是我的 app组件html文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <button (click) = "openDialog()" mat-raised-button class="btn btn-primary">Click me!</button>
</div>

应用程序组件ts文件：

export class AppComponent {
  constructor(public dialog: MatDialog) {
  }
  openDialog () {
    let dialogref = this.dialog.open(ChooseEmojiDialogComponent, {
      width:'500px',
      position: {
        top: '40px',
        left: '400px'
      }
  });

}
}