Question

在我的Angular 2应用程序中，我设置了一个自定义指令，根据用户将鼠标悬停在相关元素上时显示和隐藏删除图标。我很确定我按照建议设置了所有内容，但是当我将鼠标悬停在元素上时没有任何反应。这让我想知道问题是指针是否设置错误，或者组件是否只是不知道它（即 - 我没有正确导入它以便在组件中使用）。顺便说一句，我的目标是.field-delete-btn css类，它应用于我试图隐藏的删除图标，然后用户将鼠标悬停在它上面。

这是指令本身：

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”，我在组件视图中使用它（因为我不是确定是否在div或span上放置“cloakIt”，我将它放在两者上用于测试目的）：

<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应该在将鼠标悬停在元素上时触发，但没有任何反应。我没有得到任何错误，只是认识到发生了悬停事件。顺便说一下，我已经在我的root app.module中列出了这个指令 - 据我所知，这意味着它现在应该可以在任何地方使用。但是，为了额外的措施，虽然我认为不应该有必要，但我还在我正在使用它的组件中导入了该指令。

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

修改

以下是Plunkr的链接，其中我遵循了自定义指令的基本结构。

Answer 1

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

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

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

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

1 个答案: