Angular 中的 onFocusEvent
在本文中，我们将处理 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>
输出：
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
