javascript - Angular Material Datepicker openStream 和 closeStream

Question

关于 Angular Material 的官方文档，日期选择器组件提供了两个输出，如果日期选择器打开(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>

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

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