【问题标题】:Angular Material 2 Datepicker closed event not executed (Angular 4)Angular Material 2 Datepicker关闭事件未执行(Angular 4)
【发布时间】:2019-03-22 08:52:01
【问题描述】:

我在 Angular 4.x 中使用 Angular Material 2 Datepicker - 当我选择一个日期时,它应该在 datepicker 关闭时发出一个函数(它在选择日期时关闭)。我基本上希望能够选择一个日期而不关闭日期选择器(它应该保留在屏幕上并突出显示所选日期)

这是基于以下代码,该代码在 stackblitz 上运行良好 - 但由于某种原因不在我自己的应用程序中? https://stackblitz.com/edit/angular-ysspzm-ckkrbd

-注意- stackblitz 代码是我遇到的一些通用代码,与下面的代码不同(尽管几乎相同)

// 组件

@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.scss'],
})

export class DatepickerComponent {
@ViewChild('keepOpen') _input: ElementRef;

  _openCalendar(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here1'); // i see this in the console
  }

  _openCalendarClosed(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here2'); // never ever see this in the console log??
  }
}

// html

<input
        matInput
        [matDatepicker]="picker"
        placeholder="Choose a date"
        (click)="_openCalendar(picker)"
        #keepOpen>

<mat-datepicker-toggle
        matSuffix
        [for]="picker">
</mat-datepicker-toggle>

<mat-datepicker
        #picker
        class="fixed-open"
        opened="true"
        (closed)="_openCalendarClosed(picker)">
</mat-datepicker>

【问题讨论】:

  • 您提供的 stackblitz 链接不包含您的问题中的代码。
  • @p4r1 抱歉,我应该说得更清楚一点——stackblitz 中的代码不是我的代码,但它与我尝试执行相同的功能几乎相同——我什至在我的应用程序仍然无法正常工作:(
  • 当您说它在您的应用中不起作用时,这是什么意思?
  • @p4r1 在 HTML 组件中,当日期选择器“关闭”时,它应该调用函数 _openCalendarClosed() 函数 - 这个函数基本上保持日期选择器始终打开,因为当前它在你关闭后关闭选择了一个日期
  • 我不确定升级是否有帮助,因为 2.0.0-beta.12 是 Material 的最后一个正式支持 Angular 4.x 的版本。材料 5.x 版本也都达到了 angular 5.x。

标签: javascript angular datepicker angular-material2


【解决方案1】:

看起来材料 5.0.0-rc.1 是 datepicker 组件获得输出closed 事件能力的版本。您提到您正在使用材料 2.0.0-beta.12,因此需要更新以支持此行为。

【讨论】:

  • 您似乎是正确的(尽管我希望如果可能的话不必升级到 Angular 5.x)再次感谢@p4rl 对此的建议 - 我会将其标记为答案跨度>
猜你喜欢
  • 2018-04-13
  • 1970-01-01
  • 1970-01-01
  • 2017-11-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多