Angular Material Datepicker openStream 和 closeStream

Question

关于角度材料的官方文档，datepicker 组件提供了两个输出，如果openedStream打开 ( openedStream ) 或关闭 ( closedStream ) ( closedStream -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>

Answer 2

由于 opensStream 和 closedStream 不发出值，因此您无法获取 $event 值并将其设置为 message 变量。

你能试试这个代码吗：

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

在 .ts 文件中

...
streamOpened() {
   this.message = 'Stream Opened';
}

streamClosed() {
   this.message = 'Stream Closed';
}
...

Answer 3

我想答案是[opened]的输入属性

<mat-datepicker 
    #planDatepicker
    [opened]="open()">

角度日期选择器文档

Answer 4

这对我有用：

<input 
        type="hidden"
        id="selectedDateInput"
        #selectedDateInput
        [matDatepicker]="myDatepicker"
        [min]="minDate"
        [max]="maxDate"
        (dateChange)="dateUpdated(myDatepicker, this)">
      <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #myDatepicker 
        (nextClicked)="nextClicked(myDatepicker, $event, this)" 
        (previousClicked)="previousClicked(myDatepicker, $event, this)"
        (selectedChanged)="getMonth(myDatepicker, $event, this)"
        (opened)="calIsOpened(this)">
      </mat-datepicker>