Действия пользователя, такие как щелчок по ссылке, нажатие кнопки и ввод текста, являются событиями DOM. В этом руководстве мы рассмотрим, как привязать эти события к обработчикам событий компонентов, используя синтаксис привязки событий Angular.
Привязка к событиям ввода пользователя
Вы можете использовать привязки событий Angular для ответа на любое событие DOM. Многие события DOM запускаются пользователем. Привязка к этим событиям обеспечивает способ получения ввода от пользователя.
Чтобы привязать к событию DOM, заключите имя события DOM в круглые скобки и назначьте ему цитируемый оператор шаблона.
В следующем примере показана привязка события, реализующая обработчик кликов:
Значок `(click)` слева от знака равенства определяет событие нажатия кнопки как цель привязки. Текст в кавычках справа от знака равенства — это оператор шаблона, который отвечает на событие щелчка, вызывая метод компонента onClickMe.
При написании привязки помните о шаблоне контекст выполнения оператора. Идентификаторы в операторе шаблона принадлежат определенному объекту контекста, обычно компоненту Angular, управляющему шаблоном.
Пример ниже иллюстрирует привязку к событиям ввода пользователя
Код TypeScript:
@Component ({selector: 'app-click-me', шаблон: ` {{clickMessage}}`}) класс экспорта ClickMeComponent {clickMessage = ''; onClickMe () {this.clickMessage = 'Ты мой герой!'; }}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод
См. привязку пера к событиям ввода пользователя с помощью w3resource (@ w3resource) на CodePen.
Когда пользователь нажимает кнопку, Angular вызывает метод `onClickMe` из` ClickMeComponent`.
Получение пользовательского ввода из события $ object
События DOM несут полезную информацию, которая может быть полезна для компонента. В этом разделе показано, как выполнить привязку к событию keyup поля ввода, чтобы получить ввод пользователя после каждого нажатия клавиши.
Следующий код прослушивает событие keyup и передает всю полезную нагрузку события ($ event) в обработчик событий компонента.
Код TypeScript:
шаблон: ` {{values}}
`
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. перо Получение пользовательского ввода из объекта $ event с помощью w3resource (@ w3resource) на CodePen.
Когда пользователь нажимает и отпускает клавишу, происходит событие keyup, и Angular предоставляет соответствующий объект события DOM в переменной $ event, которую этот код передает в качестве параметра в метод onKey () компонента.
Код TypeScript:
класс экспорта KeyUpComponent_v1 {values = ''; onKey (событие: любое) {this.values + = event.target.value + '| '; }}
Live Demo:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод
См. Pen Получить ввод пользователя из объекта $ event 2 с помощью w3resource (@ w3resource) на CodePen.
Свойства объекта Объект $ event различается в зависимости от типа события DOM. Например, событие мыши включает в себя информацию, отличную от события редактирования поля ввода.
Все стандартные объекты событий DOM имеют целевое свойство, ссылку на элемент, вызвавший событие.
В этом случае target ссылается на элемент , а event.target.value возвращает текущее содержимое этого элемента.
После каждого вызова метод onKey () добавляет содержимое значения поля ввода в список в свойстве значений компонента, за которым следует символ-разделитель (|). Интерполяция отображает накапливающиеся изменения поля ввода из свойства values.
В качестве альтернативы вы можете накапливать отдельные ключи, заменив event.key на event.target.value
Получение пользовательского ввода из ссылочной переменной шаблона
Есть другой способ получить пользовательские данные: использовать ссылочные переменные шаблона Angular. Эти переменные обеспечивают прямой доступ к элементу из шаблона. Чтобы объявить ссылочную переменную шаблона, поставьте перед идентификатором символ решетки (или решетки) (#).
В следующем примере ссылочная переменная шаблона используется для реализации обратной связи нажатия клавиш в простом шаблоне.
Код TypeScript:
Компонент ({selector: 'app-loop-back', template: ` {{box.value}}
`}) класс экспорта LoopbackComponent {}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никакого вывода
См. перо Получить ввод пользователя из ссылочная переменная шаблона, созданная w3resource (@ w3resource) на CodePen.
Ссылочная переменная шаблона с именем `box`, объявленная в элементе` `, ссылается на` Сам элемент `. Код использует переменную `box` для получения значения` value` элемента ввода и отображения его с интерполяцией между тегами `
`.
Легче добраться до поля ввода со ссылкой на шаблон вместо того, чтобы пройти через объект `$ event`. Вот переписанный предыдущий пример клавиатуры, который использует ссылочную переменную шаблона для получения ввода пользователя..
Код TypeScript:
Компонент ({selector: 'app-key-up2', шаблон: ` {{values}}
`}) класс экспорта KeyUpComponent_v2 {values = ''; onKey (значение: строка) {this.values + = значение + '| '; }}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод
См. Перезапись справочной переменной шаблона пером, чтобы получить ввод пользователя. автор: w3resource (@ w3resource) на CodePen.
Приятным аспектом этого подхода является то, что компонент получает чистые значения данных из представления. Больше не требуется знание $ event и его структуры.
Фильтрация ключевых событий (с key.enter)
(keyup) обработчик событий слышит каждое нажатие клавиши. Иногда имеет значение только клавиша Enter, потому что она сигнализирует о том, что пользователь закончил вводить текст. Один из способов уменьшить шум — проверить каждый код $ event.keyCode и предпринять действия только тогда, когда клавиша — Enter.
Это можно легко сделать с помощью псевдо-события Angular keyup.enter. Затем Angular вызывает обработчик событий только тогда, когда пользователь нажимает Enter.
Код TypeScript:
@Component ({селектор: 'app-key-up', шаблон: ` {{value}}
`}) экспорт class KeyUpComponent {значение = ''; onEnter (value: string) {this.value = value;}}
Живая демонстрация:
Это представляет собой просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. фильтрацию событий Pen Key (с key.enter) с помощью w3resource (@ w3resource) на CodePen.
При размытии
В предыдущем примере текущее состояние поля ввода теряется, если пользователь отходит и щелкает в другом месте страницы без предварительного нажатия Enter. Свойство value компонента обновляется только тогда, когда пользователь нажимает Enter.
Чтобы исправить эту проблему, прослушайте как клавишу Enter, так и событие размытия.
Код TypeScript:
Component ({selector: 'app-key-up4', template: ` {{value}}
`}) класс экспорта KeyUpComponent_v4 {value = ''; update (value: string) {this.value = value;}}
Живая демонстрация:
Это представляет собой просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen On blur от w3resource (@ w3resource) на CodePen.
