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

Question

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

这是指令本身：

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>

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

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

编辑

这是一个指向 Plunkr 的链接，我遵循了自定义指令中的基本结构。

Answer 1

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

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

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