Angular 2 应用程序中的自定义指令无法按预期使用悬停事件

Question

在我的 Angular 2 应用程序中，我设置了一个自定义指令，根据用户将鼠标悬停在相关元素上的时间来显示和隐藏删除图标。我很确定我已经按照建议设置了所有内容，但是当我将鼠标悬停在该元素上时没有任何反应。这让我想知道问题是指令设置不正确，还是组件可能不知道它（即——我没有正确导入它以便在组件中使用）。顺便说一下，我的目标是 .field-delete-btn css class，它应用于我试图在用户将鼠标悬停在它上面之前隐藏的删除图标。

这是指令本身：

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

@Directive({
  selector: "[cloakIt]"
})
export class ElementDisplayDirective {
  constructor(private el: ElementRef,
              private renderer: Renderer) {

  }

  @HostListener ('mouseover') onMouseOver() {
    let deleteIcon = this.el.nativeElement.querySelector('.field-delete-btn');
    this.renderer.setElementStyle(deleteIcon, 'display', 'inline');
    console.log('User moused over...');
  }

  @HostListener('mouseout') onMouseOut() {
    let deleteIcon = this.el.nativeElement.querySelector('.field-delete-btn');
    this.renderer.setElementStyle(deleteIcon, 'display', 'none');
    console.log('User moused out...');
  }
}

而且，根据我的理解，我只是在我想要定位的包装元素上列出了选择器，所以由于我的指令选择器是 "cloakIt"，我在组件视图中像这样使用它（因为我不确定是否将 "cloakIt" 放在 div 或跨度上，我出于测试目的将它放在两者上）：

<div *ngFor="let permission of client?.permissions; let i = index;" class="permission" cloakIt>
    <span class="capitalize" cloakIt>{{permission.department}}
          <i [style.display]="'none'" (click)="removePermission(i)" class="material-icons md-18 field-delete-btn" title="Delete a role">delete</i>
    </span>
</div>

至少我的 console.log 应该在悬停在元素上时触发，但没有任何反应。我没有收到任何错误，只是认识到发生了悬停事件。顺便说一下，我已经在我的根 app.module 中列出了这个指令——据我所知，这意味着它现在应该可以在任何地方使用。然而，为了额外的措施，虽然我认为这不是必要的，但我还在我使用它的组件中导入了该指令。

那么这里的问题是什么？我设置自定义指令的语法或方式有问题，还是有其他问题？

编辑

这是一个 link 到 Plunkr，我在自定义指令中遵循了其中的基本结构。

Answer 1

不要忘记在本地模块的 @Declarations 中添加 ElementDisplayDirective。

@NgModule({
  imports: [BrowserModule],
  declarations: [
    AppComponent,
    ...,
    ElementDisplayDirective
  ],
  bootstrap: [AppComponent]
})

您提供的代码的 plunker 工作正常 https://embed.plnkr.co/f3W8kzhRdl2aQs3F2FxD

Angular 2 应用程序中的自定义指令无法按预期使用悬停事件

Custom Directive in Angular 2 App Not Working as Expected With Hover Event

angular

typescript

mouseover