当使用addEventListener重构函数时，角指令会产生错误
当使用addEventListener重构函数时，角指令会产生错误
提问于 2017-04-27 12:11:05
我已经做了一个指令，让下拉菜单在我的头上工作。目前，我使用的是普通的JavaScript方式，而不是在@ decorator上使用hostListeners属性。代码过去一直工作，直到我将函数重构为自己的函数，而不是匿名函数。
import { Directive, OnInit, ElementRef, OnDestroy } from '@angular/core';
@Directive({
selector: '[headerDropdown]'
})
export class HeaderDropdownDirective implements OnInit, OnDestroy {
private isActive: boolean;
private isAbove: boolean;
private dropDownElement: Element;
private downArrowElement: Element;
constructor(private elementRef: ElementRef) { }
ngOnInit() {
this.dropDownElement = document.querySelector('.header__dropdown');
this.downArrowElement = this.elementRef.nativeElement;
this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter);
this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave);
this.downArrowElement.addEventListener('click', this.downArrowOnClick);
document.addEventListener('click', this.documentOnClick);
}
ngOnDestroy() {
// TODO: removeEventListener
}
private activate() {
this.isActive = true;
this.downArrowElement.classList.add('header__item--active');
this.dropDownElement.classList.add('header__dropdown--active');
}
private deActivate() {
this.isActive = false;
this.downArrowElement.classList.remove('header__item--active');
this.dropDownElement.classList.remove('header__dropdown--active');
}
private downArrowOnMouseEnter() {
this.isAbove = true;
}
private downArrowOnMouseLeave() {
this.isAbove = false;
}
private downArrowOnClick() {
if (!this.isActive) {
this.activate();
} else {
this.deActivate();
}
}
private documentOnClick() {
if (!this.isAbove) {
this.deActivate();
}
}
}单击或只与downArrow按钮交互时所收到的错误：
EXCEPTION: this.activate is not a function
ErrorHandler.handleError @ VM12616:55
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12616:60 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ VM12616:60
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12616:61 TypeError: this.activate is not a function
at HTMLDivElement.HeaderDropdownDirective.downArrowOnClick (eval at <anonymous> (main.js:3477), <anonymous>:49:18)
at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:275:35)
at Object.onInvokeTask (eval at <anonymous> (main.js:1076), <anonymous>:266:37)
at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:274:40)
at Zone.runTask (eval at <anonymous> (main.js:5060), <anonymous>:151:47)
at HTMLDivElement.ZoneTask.invoke (eval at <anonymous> (main.js:5060), <anonymous>:345:33)
ErrorHandler.handleError @ VM12616:61
next @ VM12615:374
schedulerFn @ VM12630:100
SafeSubscriber.__tryOrUnsub @ VM12634:236
SafeSubscriber.next @ VM12634:185
Subscriber._next @ VM12634:125
Subscriber.next @ VM12634:89
Subject.next @ VM12631:55
EventEmitter.emit @ VM12630:86
NgZone.triggerError @ VM12629:335
onHandleError @ VM12629:296
ZoneDelegate.handleError @ zone.js?fad3:246
Zone.runTask @ zone.js?fad3:154
ZoneTask.invoke @ zone.js?fad3:345
VM12634:240 Uncaught TypeError: this.activate is not a function
at HTMLDivElement.HeaderDropdownDirective.downArrowOnClick (eval at <anonymous> (main.js:3477), <anonymous>:49:18)
at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:275:35)
at Object.onInvokeTask (eval at <anonymous> (main.js:1076), <anonymous>:266:37)
at ZoneDelegate.invokeTask (eval at <anonymous> (main.js:5060), <anonymous>:274:40)
at Zone.runTask (eval at <anonymous> (main.js:5060), <anonymous>:151:47)
at HTMLDivElement.ZoneTask.invoke (eval at <anonymous> (main.js:5060), <anonymous>:345:33)但是，如果我将代码转换为这个，那么它就能工作：
import { Directive, OnInit, ElementRef, OnDestroy } from '@angular/core';
@Directive({
selector: '[headerDropdown]'
})
export class HeaderDropdownDirective implements OnInit, OnDestroy {
private isActive: boolean;
private isAbove: boolean;
private dropDownElement: Element;
private downArrowElement: Element;
constructor(private elementRef: ElementRef) { }
ngOnInit() {
this.dropDownElement = document.querySelector('.header__dropdown');
this.downArrowElement = this.elementRef.nativeElement;
this.downArrowElement.addEventListener('mouseenter', () => { this.isAbove = true; });
this.downArrowElement.addEventListener('mouseleave', () => { this.isAbove = false; });
this.downArrowElement.addEventListener('click', () => {
if (!this.isActive) {
this.activate();
} else {
this.deActivate();
}
});
document.addEventListener('click', () => {
if (!this.isAbove) {
this.deActivate();
}
});
}
ngOnDestroy() {
// TODO: removeEventListener
}
private activate() {
this.isActive = true;
this.downArrowElement.classList.add('header__item--active');
this.dropDownElement.classList.add('header__dropdown--active');
}
private deActivate() {
this.isActive = false;
this.downArrowElement.classList.remove('header__item--active');
this.dropDownElement.classList.remove('header__dropdown--active');
}
}我不明白这个问题。我也试图使函数不是私有的，但它仍然没有工作，我也得到了同样的错误。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-27 12:13:29
变化
this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter);
this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave);
this.downArrowElement.addEventListener('click', this.downArrowOnClick);
document.addEventListener('click', this.documentOnClick);至
this.downArrowElement.addEventListener('mouseenter', this.downArrowOnMouseEnter.bind(this));
this.downArrowElement.addEventListener('mouseleave', this.downArrowOnMouseLeave).bind(this);
this.downArrowElement.addEventListener('click', this.downArrowOnClick.bind(this));
document.addEventListener('click', this.documentOnClick.bind(this));您的this没有引用这些函数下的指令。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43657440
复制相关文章
相似问题
腾讯云开发者
