Angular集成FullCalendar v4：自定义按钮触发弹窗问题求助

嘿，我来帮你搞定这个问题！你碰到的ERROR TypeError: this.openPopup is not a function本质是this指向的问题——FullCalendar按钮的click回调里的this指的是日历自身的实例，不是你的Angular父组件，所以找不到父组件里的openPopup()方法。下面给你几个可行的解决办法，按推荐程度排序：

方案一：修正this指向直接调用父组件方法（最简单直接） #

在定义customButtons时，用箭头函数来写click回调，箭头函数会继承外部作用域的this（也就是你的父组件实例），这样就能直接调用openPopup()了：

// 父组件代码
customButtons = {
  settings: {
    bootstrapFontAwesome: 'fa-cogs',
    click: () => { // 箭头函数绑定父组件的this
      this.openPopup();
    }
  }
};

// 父组件的弹窗方法
openPopup(): void {
  // 这里写你的ng-bootstrap弹窗逻辑，比如：
  // this.modalService.open(YourPopupComponent);
}

之后把这个customButtons配置传给FullCalendar子组件的对应输入属性就可以了。

方案二：使用@Output触发父组件事件（更符合Angular组件通信规范） #

如果你的FullCalendar是封装好的子组件，或者你希望组件间通信更解耦，推荐用@Output来发射事件：

1. 在FullCalendar子组件里定义一个@Output属性：

// full-calendar.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';

@Component({
  selector: 'app-full-calendar',
  templateUrl: './full-calendar.component.html'
})
export class FullCalendarComponent {
  @Input() calendarOptions: CalendarOptions;
  @Output() settingsClicked = new EventEmitter<void>();

  constructor() {
    this.calendarOptions = {
      customButtons: {
        settings: {
          bootstrapFontAwesome: 'fa-cogs',
          click: () => {
            this.settingsClicked.emit(); // 发射事件通知父组件
          }
        }
      },
      // 其他日历配置项...
    };
  }
}

2. 在父组件的模板里监听这个事件，触发弹窗方法：

<!-- 父组件模板 -->
<app-full-calendar (settingsClicked)="openPopup()"></app-full-calendar>

// 父组件代码
openPopup(): void {
  // 你的ng-bootstrap弹窗逻辑
}

方案三：将依赖注入到FullCalendar（不推荐，耦合性高） #

你提到的“把所需服务及外部依赖逻辑加载到FullCalendar中”是可行的，但会让日历组件和弹窗逻辑耦合在一起，不利于后续维护和复用，只适合特殊场景：

如果是封装的FullCalendar子组件，可以直接在子组件里注入ng-bootstrap的NgbModal服务，然后在按钮回调里直接打开弹窗：

// full-calendar.component.ts
import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { YourPopupComponent } from './your-popup.component';

@Component({
  selector: 'app-full-calendar',
  templateUrl: './full-calendar.component.html'
})
export class FullCalendarComponent {
  calendarOptions: CalendarOptions;

  constructor(private modalService: NgbModal) {
    this.calendarOptions = {
      customButtons: {
        settings: {
          bootstrapFontAwesome: 'fa-cogs',
          click: () => {
            this.modalService.open(YourPopupComponent); // 直接在子组件打开弹窗
          }
        }
      },
      // 其他日历配置...
    };
  }
}

总结一下：优先选方案一或方案二，方案一快速解决问题，方案二更适合组件解耦的场景；方案三尽量少用，除非你的业务逻辑确实需要把弹窗和日历强绑定。

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