Angular Full Calendar用于添加ng-Bootstrap模式弹出窗口

Question

我将我的大学项目用于Angular Full Calendar，我想知道如何为Modal popup添加Calendar事件看看我的图片，日历工作正常，但我不知道如何添加Modal这个活动的弹出窗口，

请帮帮我吗？ 谢谢

我想知道如何将该事件添加到ng-bootstrap-Modal

这是我的代码，

index.component.ts

export class IndexComponent {

 calendarOptions:Object = {
height: 'parent',
fixedWeekCount : false,
defaultDate: '2016-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events

events: [
  {
    title: 'All Day Event',
    start: '2016-09-01'
  },

  {
    id: 999,
    title: 'Repeating Event',
    start: '2016-09-09T16:00:00'
  },
  }

index.component.html

<div class="container-fluid">
  <div class="calendar">
    <angular2-fullcalendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
  </div>
</div>

Answer 1

这可以通过bootstrap完成，比如ngx-bootstrap，modal。

以下是使用ngx-bootstrap模式的链接：ngx-bootstrap-how-to-open-a-modal-from-another-component

您使用eventClick启动模式：

eventClick(model: any) {
    // this is used to pass event data to modal component
    const initialState = { apptEvent: model.event};

    this.bsModalRef = 
         this.modalService.show(ModalComponent, 
            Object.assign({}, this.modalConfig, { class: 'modal-md', 
            initialState }));

    this.bsModalRef.content.onClose.subscribe(result => {
         // close the modal
         this.bsModalRef.hide();
    })

};

ModalComponent将使用事件数据呈现视图。