Внедрение компонентов Angular в записи событий FullCalendar

Question

PrimeNG 7 представил компонент <p-fullCalendar>, который оборачивает библиотеку FullCalendar 4.0 в качестве углового компонента.Например,

<p-fullCalendar [options]="options" [events]="events"></p-fullCalendar>

Параметры FullCalendar включают в себя параметр eventRender , чтобы указать функцию для настройки отображения событий в календаре.Я использовал его в приведенном ниже примере, но он генерирует DOM Elements с использованием стандартного Javascript и поэтому не может содержать какие-либо другие угловые компоненты, такие как кнопка в стиле дизайна материала в примере (он по-прежнему создаетобычная кнопка в стиле, поскольку используется стандарт <button>).

Я пытался изучить такие варианты, как использование [innerHTML], ViewContainerRef с ComponentFactoryResolver или исполняющий JIT-компилятор Angular , но я не понимаю достаточно, чтобы заставить работать любой из этих подходов или узнать, какой из них лучше всего подходит для этого варианта использования.Как добавить компоненты Angular в записи событий FullCalendar?

Он не должен быть полностью динамическим, например, иметь скрытые компоненты, которые уже существуют на странице, но отображаются в нужном месте, или иметь ng-templates которые просто создаются по-другому, возможно, будет хорошо, если они отображаются и действуют как правильная запись в календаре.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit {

  options: any;
  events: any[];

  constructor() { }

  ngOnInit() {
    this.events = [
        {
            "title": "All Day Event",
            "start": "2019-02-01"
        },
        {
            "title": "Long Event",
            "start": "2019-02-07",
            "end": "2019-02-10"
        },
        {
            "title": "Repeating Event",
            "start": "2019-02-09T16:00:00"
        },
        {
            "title": "Repeating Event",
            "start": "2019-02-16T16:00:00",
            'color': 'rgb(72,101,144)',
            'textColor': 'black',
        },
        {
            "title": "Conference",
            "start": "2019-02-11",
            "end": "2019-02-13"
        },
        {
            "title": "John Smith",
            "start": "2019-02-01T10:00:00"
        },
        {
          "title": "Appointment",
          "start": "2019-02-01T16:00:00"
        },
    ];

    this.refreshOptions();
  }

  refreshOptions() {
    this.options = { eventRender: this.onRender };
  }

  onRender(info: any) {
    let title = info.event.title;
    let start = info.event.start;
    let end = info.event.end;
    if (!info.event.allDay) {
      return createElementFromHTML(
        '<a class="fc-day-grid-event fc-event">' +
        '  <div class="fc-content">' +
        '    <span>' + event.title + '</span>' +
        '    <button mat-raised-button>Button</button>'+
        '  </div>'+
        '</a>');
    }
  }

}

// Use Javascript to generate DOM Elements    
function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}