Question

从关于如何在Angular 2中构建指令的the documentation开始，我正在尝试构建自己的自定义指令，该指令隐藏了mouseenter上的div并在mouseleave上再次显示它。在目前的状态下，我的解决方案并不是很有效。当鼠标移动到div内时，div会闪烁而不是隐藏（display: none）。

MouseOver.directive.ts：

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

@Directive({ selector: '[myMouseOverImage]' })

export class MouseOverImageDirective {

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

@HostListener('mouseenter') onMouseenter(){
    this.mouse("none");
}


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


private mouse(dis: string){
        this.renderer.setElementStyle(this.el.nativeElement, 'display', dis)
    }

}

使用HTML where指令：

<div class="container-fluid">
    <div class="row">
<p myHighlight>HEllo</p>
        <div *ngFor="let displayData of data" class=" col-md-3 col-sm-4 col-xs-12  no-padding">
            <div class="img-responsive trainer" [ngStyle]="{'background-image': 'url(' + displayData.imageUrl  + ')'}">
                <!--    <img  class="img-responsive"  [src]="trainer" alt="venjari"> -->
                <div  myMouseOverImage class="trainerProfileActive">

                <p> {{ displayData.name }}</p>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

为您找到解决方案。由于您隐藏了整个dom元素，因此事件会产生这种闪烁行为。因此，解决方案是使用指令使用可见性样式来包装要隐藏的内容以隐藏子项。

@Directive({ selector: '[myMouseOverImage]' })
export class MouseOverImageDirective {
  constructor(private el: ElementRef, private renderer: Renderer){}
  @HostListener('mouseover')
  onMouseenter() {
    this.mouse("hidden");
  }

  @HostListener('mouseout')
  onMouseLeave() {
    this.mouse('visible');
  }

  private mouse(dis: string) {
    this.renderer.setElementStyle(this.el.nativeElement.firstChild, 'visibility', dis)
  }
}

HTML

<div myMouseOverImage><h2>Hello {{name}}</h2></div>

Check out this plunker

Answer 2

你应该更好地使用这样的属性：

iss

然后在你的模板中：

private mouseIn: boolean = false;
private mouse(mouseIn: boolean){
    this.mouseIn = mouseIn;
}

Answer 3

试试这个

 @HostListener('mouseenter') onMouseenter(){
        this.mouse("none"); // "none" to hide
    }


@HostListener('mouseleave') onMouseLeave(){
    this.mouse("block"); // "block" to show
}

鼠标悬停时自定义隐藏/显示指令

3 个答案: