网站首页 » 前端开发 » Angular 2+ » Angular 2+ 用户输入
上一篇:
下一篇:

Angular 2+ 用户输入

前言

事件相信你已经不陌生,比如鼠标事件、键盘事件等,我们可以通过这些事件来触发一些方法以达到我们想要的目的,这再正常不过了,下面我们就来看看有关 Angular 2+ 中的事件。

用户输入

先来看看下面这个简单的事件绑定

<button (click)="clickFn()">Click me!</button>

在 Angular 中我们使用“()” 来绑定事件,等号右边为要执行的方法。

通过 $event 对象取得用户输入

监听keyup事件,并把 $event 传给组件的处理函数,通过$event 来获取相关的信息。比如我们要获取一个输入框的值可以像下面这样写:

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

@Component({
  selector: 'app-root',
  template: '<input type="text" (keyup)="eventFn($event)">',
})
export class AppComponent {
  eventFn(event: any) {
    console.log(event.target.value);
  }
}

你还可以给 event 预设类型:

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

@Component({
  selector: 'app-root',
  template: '<input type="text" (keyup)="eventFn($event)">',
})
export class AppComponent {
  eventFn(event: KeyboardEvent) {
    console.log((<HTMLInputElement>event.target).value);
  }
}

从一个模板引用变量中获得用户输入

除了通过上面的 event 来获取用户输入外,我们还可以通过模板引用变量来获取值:

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

@Component({
  selector: 'app-root',
  template: `
      <input #inBox type="text" (keyup)="eventFn($event)">
      <p>{{inBox.value}}</p>
  `,
})

export class AppComponent { }

我们现在使用这种方式来取代 $event 给函数传参。

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

@Component({
  selector: 'app-root',
  template: '<input #inBox type="text" (keyup)="eventFn(inBox.value)">',
})

export class AppComponent {
  eventFn(value: string) {
    console.log(value);
  }
}

按键事件过滤

上面的事件监听(keyup)是监听所有的按键的,除此之外我们还可以通过形如:key.enter 的方式来对按键进行有目的性的过滤。

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

@Component({
  selector: 'app-root',
  template: '<input #inBox type="text" (keyup.enter)="eventFn(inBox.value)">',
})

export class AppComponent {
  eventFn(value: string) {
    console.log(value);
  }
}

失去焦点事件 (blur)

对于输入框来说,还有一个获取焦点和失去焦点的事件:

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

@Component({
  selector: 'app-root',
  template: '<input #inBox type="text" (blur)="eventFn(inBox.value)">',
})

export class AppComponent {
  eventFn(value: string) {
    console.log(value);
  }
}

你可以在 input 元素身上同时加上 keyup 和 blur,或者再配合其它更多的事件,来满足我们业务中的各种需求。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-user-input/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END