Angular 14集成FullCalendar：无法访问组件函数问题咨询

按照FullCalendar官方文档完成Angular 14的FullCalendar集成后，配置CalendarOptions的events函数时，无法通过this访问组件的属性及注入的服务，执行时报空指针错误。具体代码如下：

import { Component, OnInit } from '@angular/core';
import { CalendarOptions, defineFullCalendarElement } from '@fullcalendar/web-component';
import dayGridPlugin from '@fullcalendar/daygrid';
import { MyHttpService } from '...';

defineFullCalendarElement();

@Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

test:number = 1;
calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    events: function (info, successCallback, failureCallback) {
            console.log(this.test) //Cannot read properties of null (reading 'test')
            this.myHttpService.getEvents() //Cannot read properties of null (reading 'myHttpService')
                .subscribe((events) => {
                    successCallback(this.makeEvents(events));
                });
            },

    };

constructor(protected myHttpService : MyHttpService) { }
}

问题说明 #

这种情况是正常的，核心原因是普通函数表达式的this指向问题：FullCalendar调用events回调时，this的上下文并不是Angular组件实例，而是FullCalendar内部的执行上下文（甚至可能为null），因此无法访问组件的属性和注入的服务。

解决方法 #

使用箭头函数替代普通函数，箭头函数不会创建自己的this，它会继承外层（组件类）的this上下文，这样就能正常访问组件的属性和服务。

修改后的代码如下：

import { Component, OnInit } from '@angular/core';
import { CalendarOptions, defineFullCalendarElement } from '@fullcalendar/web-component';
import dayGridPlugin from '@fullcalendar/daygrid';
import { MyHttpService } from '...';

defineFullCalendarElement();

@Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

test:number = 1;
calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    // 改用箭头函数
    events: (info, successCallback, failureCallback) => {
            console.log(this.test); // 现在能正常访问组件的test属性
            this.myHttpService.getEvents()
                .subscribe((events) => {
                    successCallback(this.makeEvents(events)); // 这里的this也继承自组件上下文
                });
            },

    };

constructor(protected myHttpService : MyHttpService) { }

// 补充事件格式转换方法（根据实际业务调整）
makeEvents(rawEvents: any[]): any[] {
    return rawEvents.map(event => ({
        id: event.id,
        title: event.title,
        start: event.startTime,
        end: event.endTime
    }));
}
}

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