指令拋出錯誤，無法理解

Question

我使用angular5，在應用程序中我創建了一個拋出錯誤的指令。 我根本無法理解這個問題，有人在這里幫我嗎？

代碼：

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';

@Directive({
    selector: '[zoom]'
})
export class ZoomDirective {

    constructor(private el:ElementRef, private renderer:Renderer) { 

        @HostListener('mouseenter') onMouseEnter() {
            this.highlight('yellow');
        }

    }

}

錯誤：

cannot find onMouseEnter, did you mean onmouseenter

我在以下onMouseEnter突出顯示： onMouseEnter和this.highlight('yellow'); 有什么問題？

角度cli詳細信息：

Angular CLI: 1.6.5
Node: 6.11.4
OS: win32 x64
Angular: 5.2.3

Answer 1

@HostListener('mouseenter')應該在構造函數之外聲明：

export class ZoomDirective {

    constructor(private el:ElementRef, private renderer:Renderer) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.highlight('yellow');
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

可以在Angular文檔中找到更多示例。