PrimeNG - FullCalendar:无法访问 fullCalendar 方法
PrimeNG - FullCalendar: cannot access fullCalendar methods
我有一个 Angular 7 应用程序,我在其中使用 PrimeNG
和 FullCalendar 4 来显示和管理日程安排。
为了删除一个事件,我向呈现的事件添加了一个自定义删除图标,并将其 onClick 事件绑定到我的 onEventDeleteClicked 函数。
根据 PrimeNG
文档,我为日历添加了一个 ViewChild
以访问其方法(代码如下)。
https://www.primefaces.org/primeng/#/fullcalendar
component.ts ViewChild 和 onEventDeleteClicked
@ViewChild('daySchedule') fc: FullCalendar;
public onEventDeleteClicked(event: Event): void {
// Delete selected Event
const calendar = this.fc.getCalendar();
console.log(event);
}
component.html
<div class="calendar-container">
<p-fullCalendar #daySchedule [events]="events" [options]="options"></p-fullCalendar>
</div>
然而,当我尝试在方法中调用 "const calendar = this.fc.getCalendar();"
时,我得到了 Error: "Cannot get getCalendar of undefined"
我已经在 fullCalendars 中检查了自己的回调,例如 eventRender 和 Angular 生命周期挂钩 AfterViewInit
。在它们两个中,都定义了 FC,我可以访问 getCalendar()
,但是当从我自己的任何函数访问时,在这个 FC 之外似乎是未定义的。
经过更多的挖掘和测试,我发现我通过以下方式添加到图标的事件侦听器:
element.addEventListener('click', this.onEventDropped, false);
是问题所在。用 Angulars Renderer2 替换它解决了我的问题。
this.renderer.listen(element, 'click', (dropEvent: any) => {
this.onEventDropped(dropEvent);
});
我有一个 Angular 7 应用程序,我在其中使用 PrimeNG
和 FullCalendar 4 来显示和管理日程安排。
为了删除一个事件,我向呈现的事件添加了一个自定义删除图标,并将其 onClick 事件绑定到我的 onEventDeleteClicked 函数。
根据 PrimeNG
文档,我为日历添加了一个 ViewChild
以访问其方法(代码如下)。
https://www.primefaces.org/primeng/#/fullcalendar
component.ts ViewChild 和 onEventDeleteClicked
@ViewChild('daySchedule') fc: FullCalendar;
public onEventDeleteClicked(event: Event): void {
// Delete selected Event
const calendar = this.fc.getCalendar();
console.log(event);
}
component.html
<div class="calendar-container">
<p-fullCalendar #daySchedule [events]="events" [options]="options"></p-fullCalendar>
</div>
然而,当我尝试在方法中调用 "const calendar = this.fc.getCalendar();"
时,我得到了 Error: "Cannot get getCalendar of undefined"
我已经在 fullCalendars 中检查了自己的回调,例如 eventRender 和 Angular 生命周期挂钩 AfterViewInit
。在它们两个中,都定义了 FC,我可以访问 getCalendar()
,但是当从我自己的任何函数访问时,在这个 FC 之外似乎是未定义的。
经过更多的挖掘和测试,我发现我通过以下方式添加到图标的事件侦听器:
element.addEventListener('click', this.onEventDropped, false);
是问题所在。用 Angulars Renderer2 替换它解决了我的问题。
this.renderer.listen(element, 'click', (dropEvent: any) => {
this.onEventDropped(dropEvent);
});