角4：マウスオーバレイでマウスオーバーレイを表示する

Question

Angular4コンポーネントでthisを取得したいと思いますが、Jqueryを使用しません。

mouseoverとmouseoutの両方のマウスの向きに基づいて、オーバーレイのdivをアニメーションで表示する必要があります。コンポーネントのサンプルコードを書き直そうとしましたが、event.targetの幅と高さを取得できません。

私のdiv：

<div (mouseover)='showOverlay($event)'>div to hover</div> 

コンポーネント：

export class MyComponent implements OnInit { 

    constructor(private _el: ElementRef) { 
    } 

    ngOnInit() { 

    } 

    showOverlay(e) { 
     const target = e.target; 
     console.log(target._el.nativeElement); // Returns undefined 
     console.log(target.nativeElement); // Returns undefined 
     console.log(target.nativeElement.width); // Error 
     console.log(target._el.nativeElement.width); // Error 
    } 
} 

任意のアイデア？

は、私はあなたが各<div>のためにそれを「再利用」することができますDirectiveを書くために、より良いことだと思うあなた

Answer 1

私はこの効果を好むので、私は角度アニメーションと成分からなる：https://stackblitz.com/edit/angular-fftwpgを。

import { Component, HostListener } from '@angular/core'; 
import { AnimationEvent } from '@angular/animations'; 
import { 
    trigger, 
    state, 
    style, 
    animate, 
    transition 
} from '@angular/animations'; 

const animateIn = '0.15s ease-in'; 
const animateOut = '0.25s ease-out'; 

const styleIdle = { transform: 'translate3d(0, 0, 0)' }; 
const styleTop = { transform: 'translate3d(0, -100%, 0)' }; 
const styleRight = { transform: 'translate3d(100%, 0, 0)' }; 
const styleBottom = { transform: 'translate3d(0, 100%, 0)' }; 
const styleLeft = { transform: 'translate3d(-100%, 0, 0)' }; 

export const HoverContainerAnimations = [ 
    trigger('hover', [ 
    state('*', style(styleIdle)), 
    transition('* => in-left', [ 
     style(styleLeft), animate(animateIn) 
    ]), 
    transition('* => in-right', [ 
     style(styleRight), animate(animateIn) 
    ]), 
    transition('* => in-top', [ 
     style(styleTop), animate(animateIn) 
    ]), 
    transition('* => in-bottom', [ 
     style(styleBottom), animate(animateIn) 
    ]), 
    transition('* => out-right', [ 
     animate(animateOut, style(styleRight)) 
    ]), 
    transition('* => out-left', [ 
     animate(animateOut, style(styleLeft)) 
    ]), 
    transition('* => out-top', [ 
     animate(animateOut, style(styleTop)) 
    ]), 
    transition('* => out-bottom', [ 
     animate(animateOut, style(styleBottom)) 
    ]), 
    ]) 
]; 


@Component({ 
    // tslint:disable-next-line:component-selector 
    selector: 'hover-container', 
    template: ` 
    <ng-content></ng-content> 
    <div class="overlay" 
     *ngIf="state" 
     [@hover]="state" 
     (@hover.done)="onDone($event)"> 
     <ng-content select="[overlay]"></ng-content> 
    </div>`, 
    styleUrls: ['./hover-container.component.css'], 
    animations: HoverContainerAnimations, 
}) 
export class HoverContainerComponent { 
    state; 

    @HostListener('mouseenter', ['$event']) 
    @HostListener('mouseleave', ['$event']) 
    onHover(event: MouseEvent) { 
    const direction = event.type === 'mouseenter' ? 'in' : 'out'; 
    const host = event.target as HTMLElement; 
    const w = host.offsetWidth; 
    const h = host.offsetHeight; 

    const x = (event.pageX - host.offsetLeft - (w/2)) * (w > h ? (h/w) : 1); 
    const y = (event.pageY - host.offsetTop - (h/2)) * (h > w ? (w/h) : 1); 
    const states = ['top', 'right', 'bottom', 'left']; 
    const side = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180)/90) + 3) % 4; 
    this.state = `${direction}-${states[side]}`; 
    } 

    onDone(event: AnimationEvent) { 
    this.state = event.toState.startsWith('out-') ? null : this.state; 
    } 

} 

Answer 2

ありがとうございます。

指令：

@Directive({ 
    selector: '[over]' 
}) 
export class OverDirective { 
    constructor(private elementRef: ElementRef) { 
    } 

    @HostListener('mouseover', ['$event']) 
    onOver(event: MouseEvent): void { 
     console.log(this.elementRef.nativeElement.offsetHeight) 
    } 
} 

HTML：

<div over id="myDiv">div to hover</div> 

それでもテンプレート変数を経由してコンポーネント内からの要素にアクセスする場合：

HTML

<div id="div2" (mouseover)="onMouseOver($event, toto)" #toto>an other div to hover</div> 

活字体

onMouseOver(event, elem) 
    { 
    console.log(elem.offsetHeight); 
} 

Plunker