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

Действия пользователя, такие как нажатие на ссылку, нажатие кнопки и ввод текста, являются событиями DOM. В этом руководстве мы рассмотрим, как связать эти события с обработчиками событий компонента, используя синтаксис привязки событий Angular.

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

Вы можете использовать привязки событий Angular для ответа на любое событие DOM. Многие события DOM запускаются пользовательским вводом. Связывание с этими событиями дает возможность получить ввод от пользователя.

Для привязки к событию DOM заключите имя события DOM в круглые скобки и присвойте ему цитируемый оператор шаблона.

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

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

`(Click)` слева от знака равенства идентифицирует событие нажатия кнопки как цель привязки. Текст в кавычках справа от знака равенства является оператором шаблона, который отвечает на событие click, вызывая метод компонента onClickMe.

При написании привязки учитывайте контекст выполнения оператора шаблона. Идентификаторы в выражении шаблона принадлежат конкретному объекту контекста, обычно компоненту Angular, управляющему шаблоном.

Пример ниже иллюстрирует привязку к событиям пользовательского ввода

Код TypeScript:

@Component({
  selector: 'app-click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
  onClickMe() {
    this.clickMessage ='You are my hero!';
  }
}

Демонстрация в реальном времени:

См. Привязка пера к событиям ввода пользователя пользователем w3resource ( @ w3resource ) на CodePen .

Когда пользователь нажимает кнопку, Angular вызывает метод onClickMe из ClickMeComponent.

Получить пользовательский ввод из объекта $ event

События DOM несут полезную информацию, которая может быть полезна для компонента. В этом разделе показано, как привязать к событию keyup поля ввода, чтобы получить ввод пользователя после каждого нажатия клавиши.

Следующий код прослушивает событие keyup и передает всю полезную нагрузку события ($ event) обработчику события компонента.

Код TypeScript:

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}} </p>
`

Демонстрация в реальном времени:

См. Перо Получите пользовательский ввод из объекта $ event по w3resource ( @ w3resource ) на CodePen .

Когда пользователь нажимает и отпускает клавишу, происходит событие keyup, и Angular предоставляет соответствующий объект события DOM в переменной $ event, которую этот код передает в качестве параметра методу onKey () компонента.

Код TypeScript:

export class KeyUpComponent_v1 {
  values = '';
  onKey(event: any) {
    this.values += event.target.value + ' | ';
  }
}

Демонстрация в реальном времени:

См. Перо Получите пользовательский ввод из объекта $ event 2 по w3resource ( @ w3resource ) на CodePen .

Свойства объекта $ event варьируются в зависимости от типа события DOM. Например, событие мыши включает в себя информацию, отличную от события редактирования поля ввода.

Все стандартные объекты событий DOM имеют целевое свойство, ссылку на элемент, вызвавший событие.

В этом случае target ссылается на элемент <input>, а event.target.value возвращает текущее содержимое этого элемента.

После каждого вызова метод onKey () добавляет содержимое значения поля ввода в список в свойстве значений компонента, за которым следует символ разделителя (|). Интерполяция отображает накопление изменений в поле ввода из свойства values.

В качестве альтернативы, вы можете накапливать отдельные ключи, подставляя event.key вместо event.target.value.

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

Есть еще один способ получить пользовательские данные: использовать ссылочные переменные шаблона Angular. Эти переменные обеспечивают прямой доступ к элементу из шаблона. Чтобы объявить переменную ссылки на шаблон, перед идентификатором должен стоять символ хеша (или фунта) (#).

В следующем примере используется ссылочная переменная шаблона для реализации петли нажатия клавиш в простом шаблоне.

Код TypeScript:

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

Демонстрация в реальном времени:

См. Перо Получите пользовательский ввод из ссылочной переменной шаблона с помощью w3resource ( @ w3resource ) в CodePen .

Ссылочная переменная шаблона с именем `box`, объявленная в элементе` <input> `, ссылается на сам элемент <input>. Код использует переменную `box`, чтобы получить значение элемента input и отобразить его с интерполяцией между тегами <p>.

Попасть в поле ввода с помощью ссылочной переменной шаблона проще, чем пройти через объект `$ event`. Вот переписать предыдущий пример keyup, который использует переменную ссылки на шаблон для получения ввода пользователя.

Код TypeScript:

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

Демонстрация в реальном времени:

См. Перезапись пером ссылочной переменной шаблона, чтобы получить ввод пользователя. по w3resource ( @ w3resource ) на CodePen .

Приятным аспектом этого подхода является то, что компонент получает чистые значения данных из представления. Больше не требуется знание $ event и его структуры.

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

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

Это можно легко сделать, используя псевдо-событие Angular keyup.enter. Затем Angular вызывает обработчик событий только тогда, когда пользователь нажимает Enter.

Код TypeScript:

@Component({
  selector: 'app-key-up',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}} </p>
  `
})
export class KeyUpComponent{
  value = '';
  onEnter (value: string) {this.value = value;}
}
 

Демонстрация в реальном времени:

См. Фильтрация событий Pen Key (с key.enter) по w3resource ( @ w3resource ) на CodePen .

На размытие

В предыдущем примере текущее состояние поля ввода теряется, если пользователь уходит и щелкает в другом месте на странице, не нажимая сначала клавишу Enter. Свойство value компонента обновляется только тогда, когда пользователь нажимает Enter.

Чтобы устранить эту проблему, прослушайте клавишу Enter и событие размытия.

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen On blur от w3resource ( @ w3resource ) в CodePen .

Предыдущий: Введение в компоненты
Далее: Введение в модули