Angular 中的 onFocusEvent

Rana Hasnain Khan 2022年5月31日
Angular 中的 onFocusEvent

在本文中,我們將處理 Angular focus() 並舉例說明它是如何工作的。

在 Angular 中使用 onFocusEvent()

我們將看到 Angular 10 中的焦點事件是什麼以及我們如何使用它。當元素獲得焦點時,將觸發焦點事件。

# Angular

<input (focus)='functionName()'/>

焦點事件使用的 NgModuleCommonModule

讓我們有一個使用焦點事件的分步示例。

  1. 建立一個我們可以使用的 Angular 應用程式。
  2. app.component.ts 中,建立一個觸發焦點事件的函式。
  3. 在 app.component.html 中,製作一個輸入元素並設定焦點事件。
  4. 使用 ng serve 服務 Angular 應用程式以檢視輸出。

程式碼 - app.component.ts

# Angular

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onFocusEvent(): void {
        console.log('Focus Activated for this method');
    }
}

程式碼 - app.component.html

# Angular
<form>
    <input type="text" placeholder="Text" (focus) = 'onFocusEvent()'>
</form>

輸出:

angular 中的 onfocus 檢視

每當我們關注輸入欄位時,就會顯示控制檯中的輸出。

onfocus 控制檯登入 Angular

讓我們再舉一個例子,當單擊按鈕時,控制檯中會顯示訊息"Focus Activated for this method"

程式碼 - app.component.ts

# Angular

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onFocusEvent(): void {
        console.log('Focus Activated for this method');
    }
}

程式碼 - app.component.html

# Angular

<br>
<form>
    <button (focus) = 'onFocusEvent()'>Click Me!</button>
</form>

輸出:

Angular 按鈕上的 onfocus 事件

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - Angular Event