迹忆客 专注技术分享

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

在 Angular 中使用 onFocusEvent()

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

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

焦点事件使用的 NgModule 是 CommonModule。

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

代码 - app.component.ts：

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：

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

输出：

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

让我们再举一个例子，当单击按钮时，控制台中会显示消息"Focus Activated for this method"。

代码 - app.component.ts：

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：

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

输出：