带有 Angular 的 Fullcalendar 5：事件中的组件答案

【问题标题】：Fullcalendar 5 with Angular: Component inside Event带有 Angular 的 Fullcalendar 5：事件中的组件
【发布时间】：2021-09-17 16:31:49
【问题描述】：

最近，我的公司从 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 方法，但我宁愿在事件中使用真正的角度组件。您对如何解决这个问题有什么建议吗？

【问题讨论】：

(click)="copyEvent($event)" ... 是否使用 $ 帮助？
我的意思是*ngFor="let event of events"中的事件，不使用，任何参数也不起作用

标签： javascript angular typescript fullcalendar angular12

【解决方案1】：

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

这些功能是这样添加的：

【讨论】：