Angular15集成FullCalendar6，点击日期调用组件方法报错求助

问题根源在于dateClick回调使用了普通函数，导致this指向的是CalendarOptions对象而非组件实例，因此找不到retrieveDataBase方法。直接将普通函数替换为箭头函数即可解决，因为箭头函数会继承外层上下文的this（即你的组件实例）。

修正后的完整代码：

export class someComponent {

  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin],          
    dateClick: (info) => {                    
      this.retrieveDataBase(info.dateStr);  // 现在可正常调用组件方法
    },
  }
        
  retrieveDataBase(date: string):void{  
    this.dummyService.getdb(date).subscribe(
      (response: any) => {
        const { results } = response;
        alert(results);
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

补充说明 #

• 箭头函数不会创建独立的this上下文，它的this始终指向定义时所在的外层组件实例，因此能直接访问组件的retrieveDataBase方法和dummyService。
• 该方案完全适配你“不通过事件形式加载大量数据”的需求，仅在用户主动点击日期时触发数据库查询，避免了一次性加载全量数据的性能问题。

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