Angular Material Datepicker openStream 和 closeStream

Question

关于角度材料的官方文档，日期选择器组件提供了两个输出，如果日期选择器打开 ( openedStream) 或关闭 ( closedStream) ( datepicker-api )。

如果我打开和关闭日期选择器，我将不会从这些事件中得到任何信息，并且我<div>{{ message }}</div>仍然是空的并且没有任何价值。

我的实际设置

export class NoteCreateComponent {
  public message = "";
  
  constructor(){}
  
  toggleDatePicker(picker){
      picker.open();
  }
}

<div>{{ message }}</div>
<button (click)="toggleDatePicker(picker)" mat-icon-button>
<mat-datepicker 
    (openedStream)="message=$event"
    (closedStream)="message=$event" #picker>
</mat-datepicker>

预期的结果是我打开或关闭日期选择器（不仅仅是通过单击按钮）我得到一个反馈。

Answer 1

<mat-datepicker 
(opened)="streamOpened()" 
(closed)="streamClosed()" #picker> 
</mat-datepicker>

您不应使用 opensStream 和 closedStream 事件名称，因为它们是 DatePicker 组件的内部字段名称。使用opened和closed。看看MatDatePicker文档：

@Output('closed') closedStream: EventEmitter<void>
@Output('opened') openedStream: EventEmitter<void>