NgbDatepicker的markDisabled回调无法访问父组件作用域求助

我之前也碰到过类似的困扰，打开日历就报错，核心原因是markDisabled回调函数的this绑定问题——ng-bootstrap在调用这个回调时，并没有自动保留组件的上下文，导致你在回调里访问组件属性/方法时，this指向的不是你的组件实例，自然就拿不到作用域里的内容了。

这算不算ng-bootstrap的实现问题？其实严格来说不算，这是JavaScript函数绑定的常见特性，不过框架确实可以在文档里更明确地提醒这个点。不过咱们不用纠结这个，有几个很简单的解决方法：

方法1：使用箭头函数定义markDisabled #

箭头函数会自动继承外部作用域的this，所以直接把markDisabled写成箭头函数就能解决问题：

markDisabled = (date: NgbDate) => {
  // 这里的this就指向你的组件实例了，可以正常访问组件的属性和方法
  return this.disabledDates.includes(date);
};

方法2：手动绑定this到组件实例 #

如果习惯用普通函数写法，可以在组件初始化时把回调函数的this绑定到组件实例：

ngOnInit() {
  this.markDisabled = this.markDisabled.bind(this);
}

markDisabled(date: NgbDate) {
  return this.disabledDates.includes(date);
}

方法3：通过模板闭包传递上下文 #

另外也可以在模板里通过闭包的方式，把组件的作用域传递进去，不过这种写法不如前两种简洁：

<ngb-datepicker [markDisabled]="(date) => markDisabled(date)"></ngb-datepicker>

你可以优先试试第一种方法，这是最直观也最常用的解决方案，应该能立刻解决你打开日历报错的问题。

内容的提问来源于stack exchange，提问作者Charlie