javascript - Fullcalendar 5 with Angular：事件中的组件

Question

最近，我的公司从 AngularJS 切换到 Angular 12。现在我使用的是 Fullcalendar 版本 5 而不是版本 3。我正在使用 Fullcalendar 的 Angular 实现：https ://fullcalendar.io/docs/angular

很显然，很多事情都不再起作用了。请参阅下图以了解我想要实现的目标： 如您所见，事件内部有自定义 HTML。在那里渲染自定义 HTML 并不难，但是每个事件的右上角都有一个按钮，可以复制该事件。当我使用 angularJS 时，它工作得很好，因为我能够在 angularJS 控制器中调用函数。这不再起作用了。

我很难找到在角度上下文中触发函数的适当解决方案，但未能在互联网上找到任何有用的东西。主要问题是我可以编写所有我想要的自定义 HTML，但内容不是由 Angular 编译的（或者更确切地说，在 Angular 范围之外），因此一个简单的方法是(click)="copyEvent(event)"行不通的。我知道我可以通过使用onclick="hackyFunction(eventId)"触发点击来做一些hacky方法，但我宁愿在事件中使用真正的角度组件。你对如何解决这个问题有什么建议吗？

标签： javascriptangulartypescriptfullcalendarangular12

Answer 1

所以我找不到任何将组件注入事件的正确方法，所以我想出了这个 hacky 解决方案： 如您所见，我使用 EventRenderHook 来呈现我的自定义 HTML。为了能够访问 Angular 上下文，我使用了“ window.autoswitch.functionName”。在这种情况下，自动切换只是我在窗口上生成的一个变量作为对组件的引用：(window as any).autoswitch = this;“this”是组件。ngOnInit()我在“ ”中写了这个声明

函数是这样添加的：