Angular 5 个属性指令不适用于鼠标事件

Question

我对属性指令有疑问。我关注了 tutorial.

指令是使用 CLI 生成的，所以我使用了 ng g directive <directivename>，并且有意放在顶层，与 app.module.ts.

一起

我的 app.module.ts 看起来像这样（由于模块的专有名称，我必须省略所有导入）：

// Directives
import { EventhoverDirective } from './eventhover.directive';

@NgModule({
  declarations: [
    // all the relevant component inputs are here
    EventhoverDirective
  ],
  imports: [
   // modules are here
  ],
  providers: [
    // providers are here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

指令本身看起来像：

import { Directive, HostListener, OnInit, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[appEventhover]'
})
export class EventhoverDirective implements OnInit {

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

  ngOnInit() {
    console.log('Directive called');
  }

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

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }

}

我在 HTML 中使用它，如下所示：

<div class="container top-spacer">
  <div class="row text-center" >
    <div appEventhover class="col event" *ngFor="let event of eventList" (click)="storeEvent(event.job)">
      <img class="img-responsive" src="{{backendRoute}}/{{event.track_image_off}}">
      <p > {{event.name}} </p>
    </div>
  </div>
</div>

但是，它不起作用。它甚至没有吐出任何错误，也没有吐出其他任何东西。我可能做错了什么？

预先感谢您的帮助。

Answer 1

您的指令代码有效。在 a stackblitz 中。该指令本身是相同的。我将它应用到一个简单的 <p> 元素和使用 *ngFor.

的 <div>

我猜你的问题可能出在代码的其他地方。

Answer 2

只是为了补充已经提供的答案并分享我从经验中学到的东西。使用它的指令和组件必须包含在同一个模块中。请参阅下面的说明。

假设您有两个模块 A 和 B，分别包含组件 Ac 和 Bc，然后是指令 D。要在 Ac 中使用 D，D 和 Ac 都必须包含在模块 A 中，也就是说包含 Ac 的任何地方 D也必须包括在内。

至于Bc，因为D已经包含到模块A中，所以不能再包含到模块B中，否则会出现多重声明错误，此时D仍然不会对Bc生效。

Bc 的解决方案意味着将 D、Ac 和 Bc 移动到一个共享模块，这三个模块可以包含在一个地方。

我所说的包含是指类似于以下示例的内容。另请注意，此解决方案基于 Angular 5

@NgModule({
    imports: [
       ***
    ],
    declarations: [**your directive and component**],
    providers: [***],
})

Angular 5 个属性指令不适用于鼠标事件

Angular 5 attribute directive not working on mouseevents

attributes

directive

angular

angular5