PrimeNG - FullCalendar: невозможно получить доступ к методам fullCalendar

Question

У меня есть приложение 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 не определен доступ к любой из моих собственных функций.

Answer 1

После еще нескольких копаний и испытаний я обнаружил, что прослушиватель событий, который я добавил к значку через:

element.addEventListener('click', this.onEventDropped, false);

была проблема. Замена на Angulars Renderer2 исправила эту проблему для меня.

this.renderer.listen(element, 'click', (dropEvent: any) => {
          this.onEventDropped(dropEvent);
        });