我有一个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
?