FullCalendar 5配合Angular使用时如何在事件内嵌入组件并绑定上下文方法

直接传入HTML字符串给FullCalendar渲染的方案无法识别Angular模板语法，因为这部分内容没有经过Angular编译流程，不属于Angular上下文作用域。要实现自定义Angular组件渲染事件内容，按照以下步骤操作即可：

步骤1：创建自定义事件组件 #

编写独立的Angular组件用于渲染日历事件内容，内置你需要的业务逻辑和点击事件绑定：

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

@Component({
  selector: 'app-calendar-event',
  template: `
    <div class="event-inner">
      <span class="event-title">{{ event.title }}</span>
      <button class="copy-btn" (click)="onCopy()">复制</button>
    </div>
  `,
  styles: [`
    .event-inner {
      position: relative;
      width: 100%;
      padding: 3px 6px;
    }
    .copy-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      font-size: 12px;
      padding: 0 4px;
    }
  `]
})
export class CalendarEventComponent {
  @Input() event!: EventApi;
  @Output() copyEvent = new EventEmitter<EventApi>();

  onCopy() {
    this.copyEvent.emit(this.event);
  }
}

步骤2：在日历父组件中动态渲染自定义组件 #

在使用FullCalendar的父组件中，通过Angular的动态组件能力，将自定义组件渲染后交给FullCalendar插入到对应位置：

// calendar-container.component.ts
import { Component, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
import { CalendarEventComponent } from './calendar-event.component';

@Component({
  selector: 'app-calendar-container',
  template: `<full-calendar [options]="calendarOptions"></full-calendar>`
})
export class CalendarContainerComponent implements OnDestroy {
  calendarOptions: CalendarOptions;
  // 存储动态创建的组件引用，用于销毁避免内存泄漏
  private dynamicComponents: ComponentRef<CalendarEventComponent>[] = [];

  constructor(private viewContainerRef: ViewContainerRef) {
    this.calendarOptions = {
      // 其他你原本的日历配置，比如初始视图、日期范围等
      initialView: 'dayGridMonth',
      events: [
        // 你的事件数据列表
        { id: '1', title: '示例事件', start: new Date() }
      ],
      // 自定义事件内容回调
      eventContent: (arg) => {
        // 先销毁上一次创建的动态组件，避免内存泄漏
        this.clearDynamicComponents();
        // 动态创建自定义事件组件实例
        const componentRef = this.viewContainerRef.createComponent(CalendarEventComponent);
        // 给组件传入当前事件数据
        componentRef.instance.event = arg.event;
        // 订阅组件的复制事件，处理业务逻辑
        componentRef.instance.copyEvent.subscribe(event => {
          this.handleCopyEvent(event);
        });
        // 触发变更检测，确保组件内容渲染完成
        componentRef.changeDetectorRef.detectChanges();
        // 保存组件引用
        this.dynamicComponents.push(componentRef);
        // 返回组件的根DOM节点给FullCalendar渲染
        return { domNodes: [componentRef.location.nativeElement] };
      }
    };
  }

  // 处理复制事件逻辑
  handleCopyEvent(event: EventApi) {
    console.log('复制事件：', event.id, event.title);
    // 这里写你的复制业务代码
  }

  // 清空动态创建的组件
  private clearDynamicComponents() {
    this.dynamicComponents.forEach(ref => ref.destroy());
    this.dynamicComponents = [];
  }

  // 组件销毁时清空所有动态组件
  ngOnDestroy(): void {
    this.clearDynamicComponents();
  }
}

注意事项 #

• 必须手动管理动态创建的组件的生命周期，避免内存泄漏
• 所有Angular内置的指令、管道、依赖注入都可以在自定义事件组件中正常使用，完全符合Angular开发规范
• 不需要使用原生onclick的hack方案，所有事件绑定都在Angular上下文中正常运行

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