📜  Angular 10(模糊)事件

📅  最后修改于: 2022-05-13 01:56:36.950000             🧑  作者: Mango

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

    Click Here!!


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


    Click Here!!

输出: