Question

我正在Angular 6项目中使用Fullcalendar，并且我想在鼠标悬停事件时显示弹出窗口

使用此代码，我的控制台没有问题，但也没有显示任何内容

TS文件：

    PopOver(elem): void {
    console.log(elem);
    $(elem.element).popover({
      title: 'the title',
      content: 'qsdqsd',
      placement: 'top',
      trigger: 'manual',
      delay: { show: 200, hide: 100 },
      animation: true,
      container: '#calendar',
      html: true,
    }).popover('show');
  }

HTML文件：

 <div *ngIf="calendarOptions">
        <ng-fullcalendar #ucCalendar
                         [options]="calendarOptions"
                         (eventResize)="draging($event)"
                         (eventStartEditable)="true"
                         (eventDrop)="draging($event)"
                         (eventMouseover)="PopOver(this)"
                         (eventMouseout)="undisplay()"
        ></ng-fullcalendar>
      </div>

我尝试了许多其他解决方案，但是什么也没有，请给我一个答案，这对我很重要

Answer 1

我知道这篇文章很晚，但是我找到了解决方法。

我的HTML

<div *ngIf="calendarOptions">
          <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
              (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
      </div>

我的eventClick方法的打字稿

eventClick（model：any）{

var popTemplate = [
    '<div class="popover" style="max-width:600px;" >',
    '<div class="arrow"></div>',
    '<div class="popover-header">',
    '<button id="closepopover" type="button" class="close" aria-hidden="true">&times;</button>',
    '<h3 class="popover-title"></h3>',
    '</div>',
    '<div class="popover-content"></div>',
    '</div>'].join('');
    $('.popover').not(model.jsEvent.currentTarget).popover('hide');
    $(model.jsEvent.currentTarget).popover({
        title: 'the title',
        content: function () {
            return "This <em>rich</em>  <pre>html</pre> content goes inside popover";
        },
        template: popTemplate,
        placement: 'left',
        html: true,
        trigger: 'click',
        animation: true,
        container: 'body'
    }).popover('show');

}

我希望这对某人有帮助

将鼠标悬停在全日历Angular 6中的事件上时显示弹出框

1 个答案: