1. ホーム
  2. javascript

[解決済み] Angular 2 Hoverイベント

2022-02-17 04:26:17

質問

新しい Angular2 フレームワークで、イベントのようにホバーを行う適切な方法をご存知の方はいらっしゃいますか?

アンギュラ1 がありました。 ng-Mouseover が、それは引き継がれないようです。

ドキュメントに目を通しましたが、何も見つかりませんでした。

解決方法は?

任意のHTML要素にホバーライクなイベントを実行したい場合は、以下のようにします。

HTML

 <div (mouseenter) ="mouseEnter('div a') "  (mouseleave) ="mouseLeave('div A')">
        <h2>Div A</h2>
 </div> 
 <div (mouseenter) ="mouseEnter('div b')"  (mouseleave) ="mouseLeave('div B')">
        <h2>Div B</h2>
 </div>

コンポーネント

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'basic-detail',
    templateUrl: 'basic.component.html',
})
export class BasicComponent{

   mouseEnter(div : string){
      console.log("mouse enter : " + div);
   }

   mouseLeave(div : string){
     console.log('mouse leave :' + div);
   }
}

の両方を使用する必要があります。 mouseentermouseleave イベントを作成し、angular 2 で機能的なホバーイベントを完全に実装するようにしました。