Angular 中的 onFocusEvent

在本文中，我们将处理 Angular focus() 并举例说明它是如何工作的。

在 Angular 中使用 onFocusEvent()

我们将看到 Angular 10 中的焦点事件是什么以及我们如何使用它。当元素获得焦点时，将触发焦点事件。

# Angular

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

焦点事件使用的 NgModule 是 CommonModule。

让我们有一个使用焦点事件的分步示例。

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>

输出：

每当我们关注输入字段时，就会显示控制台中的输出。

让我们再举一个例子，当单击按钮时，控制台中会显示消息"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>

输出：