Angular 中的 onFocusEvent
Rana Hasnain Khan
2024年2月15日
在本文中,我们将处理 Angular focus()
并举例说明它是如何工作的。
在 Angular 中使用 onFocusEvent()
我们将看到 Angular 10 中的焦点事件是什么以及我们如何使用它。当元素获得焦点时,将触发焦点事件。
# Angular
<input (focus)='functionName()'/>
焦点事件使用的 NgModule
是 CommonModule
。
让我们有一个使用焦点事件的分步示例。
- 创建一个我们可以使用的 Angular 应用程序。
- 在
app.component.ts
中,创建一个触发焦点事件的函数。 - 在 app.component.html 中,制作一个输入元素并设置焦点事件。
- 使用 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>
输出:
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