Angular ngbDatepicker：如何在markDisabled中获取组件上下文

在Angular中，将组件方法直接绑定到[markDisabled]时，方法的上下文this会丢失，导致无法访问组件属性。以下是几种可靠的解决方式：

方式一：在构造函数中绑定this上下文 #

在组件构造函数里，通过bind方法将getDisabledDays的this绑定到组件实例，确保函数执行时能访问组件属性：

import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-date-picker',
  template: `
    <input type="text" ngbDatepicker [markDisabled]="getDisabledDays" #d="ngbDatepicker">
    <button (click)="d.toggle()">Toggle Picker</button>
  `
})
export class DatePickerComponent {
  // 用于动态生成禁用日期的组件属性
  disabledDateRange = { start: {year:2024, month:6, day:5}, end: {year:2024, month:6, day:15} };

  constructor() {
    // 绑定this到组件实例
    this.getDisabledDays = this.getDisabledDays.bind(this);
  }

  getDisabledDays(date: NgbDateStruct): boolean {
    // 现在可正常访问组件属性
    const isInDisabledRange = date.year === this.disabledDateRange.start.year &&
                              date.month === this.disabledDateRange.start.month &&
                              date.day >= this.disabledDateRange.start.day &&
                              date.day <= this.disabledDateRange.end.day;
    return isInDisabledRange;
  }
}

方式二：使用箭头函数定义方法 #

箭头函数会自动捕获外层上下文的this，直接用箭头函数定义getDisabledDays，无需额外绑定：

import { Component } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-date-picker',
  template: `
    <input type="text" ngbDatepicker [markDisabled]="getDisabledDays" #d="ngbDatepicker">
    <button (click)="d.toggle()">Toggle Picker</button>
  `
})
export class DatePickerComponent {
  disabledDateRange = { start: {year:2024, month:6, day:5}, end: {year:2024, month:6, day:15} };

  // 箭头函数定义，this自动指向组件实例
  getDisabledDays = (date: NgbDateStruct): boolean => {
    const isInDisabledRange = date.year === this.disabledDateRange.start.year &&
                              date.month === this.disabledDateRange.start.month &&
                              date.day >= this.disabledDateRange.start.day &&
                              date.day <= this.disabledDateRange.end.day;
    return isInDisabledRange;
  }
}

方式三：模板中用箭头函数包裹（不推荐高频场景） #

在模板里用箭头函数包裹原方法，虽能解决this问题，但每次变更检测都会创建新函数，可能影响性能，仅适合简单场景：

<input type="text" ngbDatepicker [markDisabled]="(date) => getDisabledDays(date)" #d="ngbDatepicker">

组件方法保持普通函数定义即可：

getDisabledDays(date: NgbDateStruct): boolean {
  // 可正常访问组件属性
  return /* 你的日期禁用判断逻辑 */;
}

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