当月份在ngx-bootstrap datepicker上更改时如何触发事件？

如何解决当月份在ngx-bootstrap datepicker上更改时如何触发事件？

我们正在使用ngx-bootstrap，我们需要一个日期选择器。因此ngx-bootstrap's Datepicker似乎是一个显而易见的选择。当用户导航到下个月时，我们希望加载日历的可用日期。为此，我们希望参加一些活动。我在文档中没有看到这样的事件。但是我确实在the docs of (the regular) bootstrap variant datepicker中看到了它。 我尝试了各种方法，甚至进入dom并为click事件添加了事件监听器。可以工作1次，然后可能重新渲染UI并重新创建按钮。最后一招似乎要么使用MutationObserver（非常痛苦），要么下载datepicker的源并将其破解（也很痛苦）。这似乎是一件微不足道的事情：知道日历的月份何时更改。但是我还没到那儿。任何帮助深表感谢！

解决方法

可以使用日期选择器内部存储。是的，我知道这是私人的。因此，也许不是最干净的解决方案。但是由于似乎没有公共API，所以我别无选择。我真的需要知道用户何时在日历上看到不同的月份，以便有效地加载该月份可用的日期。

这里是用于订阅日期选择器的商店并在日期选择器的视图更改时得到通知的代码。当月份更改时，您会收到日期通知。

import { BsDatepickerInlineDirective } from 'ngx-bootstrap/datepicker';
import { BehaviorSubject } from 'rxjs';

interface BsDatePickerStoreView {
  date: Date,mode: keyof { 'day','month','year'}
}

interface BsDatePickerStoreData {
  view:BsDatePickerStoreView
}

export class BsDatePickerUtils
{
  public viewChanged = new BehaviorSubject<Date>(undefined);

  private lastKnownViewDate: Date = undefined;

  constructor(datePicker: BsDatepickerInlineDirective) {
    const store = (datePicker as any)._datepicker.instance._store.source as BehaviorSubject<BsDatePickerStoreData>;
    store.subscribe((data) => {
      const viewMode = data.view.mode;
      const date = data.view.date as Date;
      if (!this.lastKnownViewDate || this.lastKnownViewDate.toDateString() !== date.toDateString()) {
        if (data.view.mode === 'day') {
          this.lastKnownViewDate = date;
          this.viewChanged.next(data.view.date);
        }
      }
    });
  }
}

这是一个简单的用法示例

// Usage example
@Component({
  selector: 'my-component',template: `
<div>
  <bs-datepicker-inline #datePicker></<bs-datepicker-inline>
</div>
  `
})
export class MyComponent implements OnInit,AfterViewInit {

  @ViewChild(BsDatepickerInlineDirective) datePicker: BsDatepickerInlineDirective;
  bsDatePickerUtils: BsDatePickerUtils;

  ngAfterViewInit() {
    this.bsDatePickerUtils = new BsDatePickerUtils(this.datePicker);
    this.bsDatePickerUtils.viewChanged.subscribe(date => {
      console.log('Calendar changed: ' + date);
    });
  }
}