在Angular中按类附加元素的监听器

时间:2017-08-29 16:02:54

标签: angular

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

当鼠标超过各个日期的标题时,我想触发某些内容。这些元素具有.fc-day-header类,所以我想绑定到具有该类的所有元素上的mouseover和mouseout事件。此外,日历需要一段时间来实例化,因此这些元素在创建父组件之后约200ms才是DOM的一部分。

以下作品,但我觉得我没有正确使用Angular中可用的内容。 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);
    });
  }
}

我认为我可以创建一个带有类选择器的指令来完成同样的事情,但是下面的代码没有运行。它被添加为父模块中的声明,并受到Natenel Basel关于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

0 个答案:

没有答案