Пользовательский ввод в Angular 2

Когда пользователи щелкают ссылки, нажимают кнопки или вводят текст, эти взаимодействия пользователя вызывают события DOM.

В этой главе мы узнаем, как использовать синтаксис привязки событий Angular для привязки этих событий.

Следующий GIF демонстрирует работу этого примера:

Исходный код можно скачать в конце статьи.

Привязка к событиям ввода пользователя

Мы можем использовать механизм привязки событий Angular, чтобы реагировать на любое DOM-событие.

В следующем примере выполняется привязка к событию click:

<button (click)="onClickMe()">点我!</button>

(click) слева от знака равенства указывает, что целью привязки является событие click кнопки. Справа текст в кавычках — это шаблонный оператор.

Полный код приведён ниже:

Файл app/click-me.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'click-me', template: ` <button (click)="onClickMe()">Нажми меня!</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'Пример!'; } }

Получение ввода пользователя через объект $event

Мы можем привязываться ко всем типам событий.

Давайте попробуем привязаться к событию keyup поля ввода и вывести введённый пользователем текст обратно на экран.

app/keyup.component.ts (v1) файл:

@Component({ selector: 'key-up1', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v1 { values = ''; /*// Не строго типизированный onKey(event:any) { this.values += event.target.value + ' | '; }*/ //Строго типизированный onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }

В приведённом выше коде мы прослушиваем событие и захватываем ввод пользователя. Angular сохраняет объект события в переменной $event.

Метод onKey() компонента используется для извлечения ввода пользователя из объекта события, а затем добавления введённого значения в свойство values.

Получение ввода пользователя из ссылочной переменной шаблона

Вы можете отобразить данные пользователя с помощью локальной переменной шаблона. Ссылочная переменная шаблона создаётся путём добавления символа решётки (#) перед идентификатором.

Следующее демонстрирует, как использовать локальную переменную шаблона:

Файл app/loop-back.component.ts:

@Component({ selector: 'loop-back', template: ` <input #box (keyup)="0"> <p>{{box.value}}</p> ` }) export class LoopBackComponent { }

Мы<input>на элементе, определили именованнуюboxпеременную ссылки на шаблон.boxПеременная ссылается на<input>сам элемент, что означает, что мы можем получить у элемента inputvalueзначение, и отобразить его с помощью интерполяционного выражения в<p>tag.

Мы можем использовать ссылочные переменные шаблона, чтобы изменить приведённый выше пример с keyup:

Файл app/keyup.components.ts (v2):

@Component({ selector: 'key-up2', template: ` <input #box (keyup)="onKey(box.value)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v2 { values = ''; onKey(value: string) { this.values += value + ' | '; } }

Фильтрация событий клавиатуры (через key.enter)

Мы можем получить значение поля ввода только тогда, когда пользователь нажимает клавишу Enter.

Обработчик события (keyup) прослушивает каждое нажатие клавиши. Мы можем фильтровать нажатия клавиш, например, проверяя каждый $event.keyCode, и обновлять свойство values только при нажатии клавиши Enter.

Angular может фильтровать события клавиатуры за нас, привязываясь к псевдособытию Angular keyup.enter, чтобы прослушивать клавишу Enter.

app/keyup.components.ts (v3)：

@Component({ selector: 'key-up3', template: ` <input #box (keyup.enter)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v3 { values = ''; }

событие blur (потеря фокуса)

Далее мы можем использовать событие blur (потеря фокуса), которое обновляет свойство values после того, как элемент теряет фокус.

В следующем примере отслеживаются как нажатие клавиши Enter, так и событие потери фокуса полем ввода.

app/keyup.components.ts (v4)：

@Component({ selector: 'key-up4', template: ` <input #box (keyup.enter)="values=box.value" (blur)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v4 { values = ''; }

Исходный код, используемый в этой статье, можно скачать следующими способами, исключая каталоги node_modules и typings.

Скачать исходный код

Другие расширения