Question

我做了一个指令，让我的标题上的下拉菜单工作。现在我正在使用vanilla JavaScript方式而不是在@Directive装饰器上使用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');
    }

}

我不明白这个问题。我也尝试使这些函数不是私有的，但它仍然没有用，我得到了同样的错误。

Answer 1

更改

 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

你的Connections.Connection[UserName]没有引用这些功能下的指令。

在重构函数

1 个答案: