Angular 2 懸停事件

Oluwafisayo Oluwatayo 2023年1月30日 2022年4月20日
  1. Angular 中的 mouseentermouseleave 應用程式
  2. Angular 中的 mouseovermouseout 應用程式
  3. mouseentermouseleave 作為 Angular 中的函式傳遞
Angular 2 懸停事件

當你將滑鼠懸停在螢幕上的某些元素上時,你無需單擊即可訪問資訊。你甚至可以在滑鼠懸停的元素上執行一些功能。

本文著眼於在元素上執行懸停事件功能滑鼠懸停的簡單解決方案。

我們將應用 mouseentermouseleave 函式來建立懸停事件。第二種方法也將使用兩個函式,即 mouseovermouseout

然後,我們將應用更高階的方法來執行懸停事件。

Angular 中的 mouseentermouseleave 應用程式

在處理成對出現的函式時,我們需要為每個函式傳遞條目。

我們使用 mouseenter 函式來宣告當我們將滑鼠懸停在元素上時會發生什麼。mouseleave 函式然後確定將滑鼠移開時會發生什麼。

HTML 輸入將如下所示:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseenter)="showImage = true"
  (mouseleave)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

之後,我們將編寫 app.component.ts,如下所示:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }
}

Angular 中的 mouseovermouseout 應用程式

mouseovermouseout 屬性像前面解釋的方法一樣成對工作,我們只需要切換功能,瞧:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImage = true"
  (mouseout)="showImage = false"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

mouseentermouseleave 作為 Angular 中的函式傳遞

我們將通過以下方法獲得更多創意和複雜性,我們將在其中將 mouseentermouseleave 事件作為函式傳遞。

HTML 將稍作調整:

<div style="text-align: center;">
  <h2>Mouse Hover Event</h2>
</div>

<button
  class="btn-primary btn"
  (mouseover)="showImg(true)"
  (mouseleave)="showImg(false)"
>
  Hover Over Me!
</button>

<br />

<img
  *ngIf="showImage"
  src="https://vangogh.teespring.com/v3/image/so-OI-9L5KAWsqHQuv6gQwymSQ8/480/560.jpg"
/>

還有 app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  title = 'mouse-hover';
  showImage: boolean;

  constructor() {
    this.showImage = false;
  }

  showImg(hover: boolean) {
    this.showImage = hover;
  }
}
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相關文章 - Angular Event