Angular中的事件处理

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/01/Angular%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86/

摘要

本文主要讲述了：

监听事件
按键修饰符

正文

监听事件

写法和内联事件处理器非常相似

即：向 HTML 特性传递一个函数调用

示例：监听点击事件

my-angular/src/app/app.component.html

1	<button type="button" (click)="onClick($event)">Click Me</button>

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  onClick(event: MouseEvent) {
    console.log(event);
  }
}

示例：监听键盘输入

my-angular/src/app/app.component.html

1	<input type="text" [value]="keywords" (input)="onInput($event)" />

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  keywords = '';

  onInput(event: Event) {
    // `$event.target`为`EventTarget`型
    // 使用类型断言，将`$event.target`断言为`HTMLInputElement`型
    this.keywords = (event.target as HTMLInputElement).value;
  }
}

按键修饰符

示例：只有当【Enter 键】弹起时，onClickSearchBtn()才会执行

my-angular/src/app/app.component.html

<input
  type="text"
  [value]="keywords"
  (input)="onInput($event)"
  (keyup.enter)="onClickSearchBtn($event)"
/>
<div>{{ keywords }}</div>

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  keywords = '';

  onInput(event: Event) {
    this.keywords = (event.target as HTMLInputElement).value;
  }

  onClickSearchBtn(event: Event) {
    console.log(event);
  }
}