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>将其应用于简单的<div>元素和*ngFor。

我猜你的问题就是代码中的其他地方。

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属性指令不适用于mouseevents

2 个答案: