为什么 @ViewChild() 装饰器在使用 PrimeNG FullCalendar 时无法在此 Angular 组

Question

我在一个简单的使用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

所以在我看来，它无法访问#externaldiv 引用。

我的假设正确吗？怎么了？我错过了什么？如何尝试修复此错误？

Answer 1

它不起作用，因为ngOnInit对ViewChild来说还为时过早，它有一个特殊的钩子AfterViewInit，所有ViewChild在触发时都已初始化，例如您可以访问this.external.nativeElement。

在这里，您可以找到他们如何使用它的示例：https://angular.io/guide/lifecycle-hooks#responding-to-view-changes

export class AfterViewComponent implements  AfterViewInit {
@ViewChild('external') external: ElementRef;
ngAfterViewInit() {
consoloe.log(this.external.nativeElement); // works
}
}

Answer 2

试试这个.calendarComponent.getApi((

https://fullcalendar.io/docs/angular