我在一个使用PrimeNG FullCalendar组件的简单 Angular 9 项目中发现以下问题，这个： https ://primefaces.org/primeng/showcase/#/fullcalendar
这个 PrimeNG FullCalendar 组件基于这个其他 Angular 原始组件https://fullcalendar.io/docs
我必须做的：我必须实现一个外部可拖动事件，如下所示：https ://stackblitz.com/edit/fullcalendar-angular-demo?file=src%2Fapp%2Fapp.component.html
在前面的示例中，它使用了原始的 Fullcalendar.io 组件，而不是 PrimeNG 组件，但是 PrimeNG 是该组件的包装，它应该是可能的。
我所做的：我创建了一个包含日历并处理简单事件的项目，例如单击特定日期，单击特定事件，将事件从一个日期移动到我日历中的另一个日期。这里是我到目前为止实现的代码存储库：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/
我的问题是什么：正如您在我的fullcalendar.component.hml文件中看到的那样，我有以下代码：
<p>fullcalendar works!</p>
<div class="content-section implementation">
<p-fullCalendar #fullcalendar
[events]="events"
[options]="options">
</p-fullCalendar>
</div>
<div #external>
<p>
<strong>Draggable Events</strong>
</p>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
</div>
所以p-fullCalendar是渲染我的日历的 PrimeNG 组件，它被#fullcalendar引用。
然后我有一个由#external引用的div，其中包含我需要拖到我的日历中的外部事件。
此外部事件拖动操作不起作用。
问题似乎取决于打字稿组件代码无法访问此 div #external引用的事实。
在我的fullcalendar.component.ts文件中，我定义了实现组件背后逻辑的此类（我正在按照提供的示例实现它）：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';
@Component({
selector: 'app-fullcalendar',
templateUrl: './fullcalendar.component.html',
styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {
events: any[];
options: any;
header: any;
@ViewChild('fullcalendar') fullcalendar: FullCalendar;
@ViewChild('external') external: ElementRef;
constructor(private eventService: EventService) {}
ngOnInit() {
this.eventService.getEvents().then(events => { this.events = events;});
//this.eventService.getEvents().then(res => {console.log(res)} )
console.log("bla");
//console.log(this.events.length);
this.options = {
plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
defaultDate: '2017-02-01',
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
dateClick: (dateClickEvent) => { // <-- add the callback here as one of the properties of `options`
console.log("DATE CLICKED !!!");
},
eventClick: (eventClickEvent) => {
console.log("EVENT CLICKED !!!");
},
eventDragStop: (eventDragStopEvent) => {
console.log("EVENT DRAG STOP !!!");
}
};
console.log("external: " + this.external);
console.log(this.fullcalendar.getCalendar().getEvents);
new Draggable(this.external.nativeElement, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
}
}
如您所见，我拥有由@ViewChild装饰的这两个属性
@ViewChild('fullcalendar') fullcalendar: FullCalendar;
@ViewChild('external') external: ElementRef;
我认为由于某种原因，我无法理解这两行无法正常工作，因为在我的控制台中，我在此行上收到以下错误：
new Draggable(this.external.nativeElement, {
................................................
................................................
................................................
});
这是尝试访问this.external.nativeElement属性时的错误：
core.js:6272 ERROR TypeError: Cannot read property 'getCalendar' of undefined
at FullcalendarComponent.ngOnInit (fullcalendar.component.ts:56)
at callHook (core.js:4770)
at callHooks (core.js:4734)
at executeInitAndCheckHooks (core.js:4674)
at refreshView (core.js:11998)
at refreshComponent (core.js:13461)
at refreshChildComponents (core.js:11701)
at refreshView (core.js:12036)
at renderComponentOrTemplate (core.js:12114)
at tickRootContext (core.js:13668)
正如您在我的代码中看到的，我还添加了这一行来调试 pourpose（到ngOnInit()方法中）：
console.log("external: " + this.external);
控制台输出是：
external: undefined
所以在我看来，它无法访问#external div 引用。
我的假设正确吗？怎么了？我错过了什么？我该如何尝试修复此错误？