鼠标悬停事件时Angular 6 fullCalendar Display popover

Question

我在Angular 6应用程序中使用fullCalendar。我想显示fullcalendar酥料饼而徘徊在类似的事件此。我想通过我的ts文件而不使用jquery实现此目的。这是我的代码。

HTML：

 <section class="main-content">
  <div *ngIf="calendarOptions">
   <ng-fullcalendar #ucCalendar 
    [options]="calendarOptions" 
    [(eventsModel)]="events"
    (eventClick)="handleClick($event.detail.event.data)"
    (eventMouseOver)="mouseOver($event, calendarPopover)">
    </ng-fullcalendar>
   </div>
 </section>

 <ng-template #calendarPopover>
    <h3>{{toolData .title}}</h3>
  </ng-template>

TS文件：

mouseOver(event, content){
    var data = event.detail.event.data;
    this.toolData = data;
    console.log(this.toolData);
  }

类似于这里的帖子

我想让ng-template打开显示。我尝试了ngbPopover，但与ngbModal不同，ngbPopover没有一个open方法，因为它是一个指令，所以只能通过调用它的方法来简单地打开popover 。

如果有人知道使用fullCalendar popover方法（不使用jquery）或通过ng-template显示任何解决方案，那么在这方面的任何帮助将不胜感激。

Answer 1

ng-container你可以通过使用and *ngIfor来做到这一点[hidden]

而是使用

<ng-template #calendarPopover></ng-template>

使用

<ng-container *ngIf="isHidden" #calendarPopover>...</ng-container>

注意：我们使用ng-container并控制它的显示*ngIf

TS

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

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: [ '...' ]
})
export class AppComponent  {
  isHidden = false;
}

扳机

<section class="main-content">
  <div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar (mouseenter)="isHidden = !isHidden" (mouseleave)="isHidden = !isHidden" [options]="calendarOptions" [(eventsModel)]="events (eventClick)="handleClick($event.detail.event.data)" (eventMouseOver)="mouseOver($event, calendarPopover)">
    </ng-fullcalendar>
  </div>
</section>

注意： (mouseenter)并mouseleave查看演示