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