Angular 指令抛出错误，无法理解

我使用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

和

this.highlight（'yellow'）问题是什么

详细信息：

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

@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;
    }
}

更多示例可以在中找到。
应在构造函数外部声明
@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;
    }
}

更多示例可以在中找到。
找不到onMouseEnter，您是说onMouseEnter
它实际上是告诉您使用
onMouseEnter
而不是
onMouseEnter
。可能尝试一下？不，我尝试过得到相同的错误，
@HostListener（'mouseenter'）
应该在构造函数外部声明。但是在
处得到错误。突出显示（'yellow'）
你能更新我的代码作为答案吗？
找不到onMouseEnter，你是说onMouseEnter
它实际上是告诉你使用
onMouseEnter
而不是
onMouseEnter
。可能尝试一下？不，我尝试过得到相同的错误，
@HostListener（'mouseenter'）
应该在构造函数外部声明。但是在
处得到错误。突出显示（'yellow'）你能更新我的代码作为答案吗？