我有一个Angular（4）应用程序，它使用https://fullcalendar.io/库来显示包含各种事件的日历 . 我也使用ap-angular2-fullcalendar作为它的包装，它可以通过 CalendarComponent 引用 . 但是，这个问题不一定特定于这个确切的库 .

当鼠标超过各个日期的 Headers 时，我想触发一些东西 . 这些元素具有 .fc-day-header 的类，所以我直到创建父组件后约200ms的DOM的一部分 .

以下是有效的，但我觉得我在Angular中可以正确使用'm not utilizing what' . setupHeadings() 方法用于添加事件侦听器（这简化为基本部分）：

export class Appointments Component implements OnInit, AfterViewInit {
  // Access ap2-fullcalendar
  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;
  calendarHeaders: Array<any> = [];

  constructor(){}

  ngAfterViewInit(){
    this.viewChanged();
  }

  /**
  * It usually takes a few milliseconds to initilize myCalendar, so viewChanged checks first to see
  * if it's available, otherwise it waits 100ms before trying again.
  */
  viewChanged() {
    const viewInformation = this.myCalendar && this.myCalendar.fullCalendar('getView');
    if (viewInformation) {
      this.setApointments();
      this.setupHeadings();
    } else {
      setTimeout(() => this.viewChanged(), 100);
  }

  setupHeadings() {
    const rawCalendarElement = (this.myCalendar['element'] as ElementRef).nativeElement;
    this.calendarHeaders = rawCalendarElement.querySelectorAll('.fc-day-header');
    this.calendarHeaders.forEach(el => {
      el.addEventListener('mouseover', (e) => this.handleDayMouseover(el), false);
      el.addEventListener('mouseout', () => this.handleDayMouseOut(), false);
    });
  }
}

我认为我可以创建一个带有类选择器的指令来完成同样的事情，但是下面没有关于using directives to enhance components when one doesn't have direct access的文章：

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

@Directive({
  selector: '.fc-day-header',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class DayHoverDirective {

  constructor() {
    console.log('Started');
  }

  onMouseEnter(){
    console.log('Enter');
  }

  onMouseLeave(){
    console.log('Leave');
  }
}

但是，没有 console.log() 语句运行（包括构造函数） . 那是因为fullcalendar组件一开始不可用吗？在fullcalendar组件可用之后，我能够/应该做些什么来触发角度来搜索 .fc-day-header 吗？

angular