Угловой полный календарь, требующий двух кликов, чтобы открыть модальное при клике событие - PullRequest
Новая
       14

Угловой полный календарь, требующий двух кликов, чтобы открыть модальное при клике событие

0 голосов
/ 18 декабря 2018

Я использую Angular6 и компонент диалога и Angular FullCalendar.У меня есть рабочий календарь.Я пытаюсь добиться следующего поведения: когда я нажимаю один раз на событие, должно открыться диалоговое окно с некоторыми подробностями о событии.В настоящее время при нажатии на событие оно загружается не в первый раз, а только после второго щелчка.Например, событие щелкается, ничего не появляется, вы снова нажимаете в любом месте экрана и появляется модальное окно.Фактическая функция openModal завершается до второго щелчка.Это как-то связано с внедрением ModalComponent в функцию openModal?

Компонент календаря: TS: 

this.calendarOptions = {
  height:500,
  editable: false,
  eventLimit: false,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listMonth'
  },
  eventClick: (calEvent, jsEvent, view) => {
    let data = {
      title: calEvent.title,
      start: calEvent.start,
      end: calEvent.end,
      price: calEvent.price,
      subject: calEvent.subject,
      subtotal: calEvent.price,
      b_id: calEvent.b_id
    };
    this.openModal(data);
  }
}

openModal(data) {
  const modalRef = this.modalService.open(ModalComponent);
  modalRef.componentInstance.data = data;
}

HTML: 

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

Модальный код: TS: 

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

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

  constructor(public activeModal: NgbActiveModal) { }

  @Input() public data;

  ngOnInit() {

   console.log(this.data)
  }
}

HTML: 

  <div role="document" class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          {{ data.title }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
      </div>
    </div>
  </div>

Я искал Интернет для решения этой проблемы, но, по жизни, не могу понятьрешение.Кто-нибудь может помочь?Есть ли способ вызвать функцию openModal со стороны HTML.Я пытался (click)="openModal", но нет никакого способа получить фактические данные конкретного события.

Любая помощь или предложения по этому поводу?

...