Angular 10(模糊)事件
在本文中,我们将了解什么是 Angular 10 中的模糊事件以及如何使用它。当元素失去焦点时会触发 blur 事件。
句法:
NgModule:模糊事件使用的模块是:
- 通用模块
方法:
- 创建一个要使用的 Angular 应用程序。
- 在 app.component.ts 中创建一个触发模糊事件的函数。
- 在 app.component.html 中创建一个输入元素并设置模糊事件。
- 使用 ng serve 为 Angular 应用程序提供服务以查看输出。
示例 1:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onBlur(): void {
console.log('Focus Is Lost for this Element');
}
}
app.component.html
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onBlur(): void {
console.log('Focus Is Lost for this Element');
}
}
app.component.html
app.component.html
输出:
示例 2:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onBlur(): void {
console.log('Focus Is Lost for this Element');
}
}
app.component.html
输出: