Как прослушивать события клавиатуры в Angular основы использования псевдо-событий
Как прослушать событие mousemove для объекта Document в Angular
Я реализую функцию перетаскивания в угловое приложение: http://jsfiddle.net/Jjgmz/1/
Часть этого заключается в прослушивании события mousemove для объекта документа.
Как я могу прослушать объект документа внутри компонента?
Представим, что это содержимое файла component.html:
Я использую Angular 4.
1 ответ
1) Использование @HostListener ( docs ). Это предпочтительный метод, которого должно быть достаточно в большинстве случаев.
2) Как и выше, вы также можете использовать (document:event)=»handler» для любого элемента DOM, но вышеупомянутое решение предпочтительнее, потому что код чище. Используя это, из класса не сразу видно, что у вас есть глобальный прослушиватель событий, и вы можете добавлять дополнительные без необходимости.
3) Renderer ( docs ) — решение более низкого уровня; полезно, когда вы не хотите загромождать свой код методами, но имеете дело с даже в другом месте, например, в ловушке, как показано в следующем фрагменте. Будьте осторожны, так как вам все еще нужно удалить прослушиватель событий, чтобы предотвратить утечки памяти; либо делайте это, когда вы знаете, что вам это больше не понадобится, либо в хуке OnDestroy.
4) Альтернативой первого примера является свойство хоста , которое не рекомендуется в Руководстве по угловым стилям, поскольку теперь вы отслеживаете имя функции в двух местах, которые в коде могут очень сильно отличаться друг от друга физически. Предпочитаю первую версию, когда это возможно.
Как прослушивать события клавиатуры в Angular: основы использования псевдо-событий
Отдельная группа директив связана с обработкой пользовательских событий. Рассмотрим директиву ng-click , которая фактически будет эквивалентна обработке события onclick в javascript. Вначале создадим небольшой проект. Все знают сервис stackoverflow, где задаются вопросы и можно проголосовать за понравившийся ответ. Сделаем что-то подобное.
Вначале создадим новый файл QuestionController.js , в котором определим контроллер QuestionController:
Здесь через объект $scope на веб-страницу передается сложный объект question, в котором определены название вопроса, автор, дата и набор ответов со своими параметрами, в том числе с рейтингом (rate). Кроме того, у нас объявлены две функции, которые уменьшают и увеличивают рейтинг переданного ответа.
Кроме того, объявлен специальный объект questColorClass, который будет хранить класс, и функция changeClass, которая меняет класс в зависимости от типа события.
Теперь перейдем к коду html. Он будет выглядеть следующим образом:
Для каждого объекта answer (то есть ответа) у нас создается блок vote, в котором есть две ссылки. При нажатии на каждую ссылку срабатывает функция, на которую указывает директива ng-click : . И в каждую функцию передается текущий объект answer. Таким образом, можно увеличивать и уменьшать рейтинг.
Для объекта вопроса устанавливается обработчик событий ng-mouseenter и ng-mouseleave : ng-mouseenter=»changeClass($event)» . Здесь уже в качестве параметра в функцию обработчика передается специальный объект $event , который может использоваться для обработки любого события и который несет в себе информацию об обрабатываемом событии.
В подключемом на веб-страницу файле стилей mystyles.css определим ряд классов, в том числе классы, которые будут переключаться в обработчике события changeClass:
В качестве изображения стили используют небольшой спрайт с двумя стрелочками внизу и вверх. В итоге проект будет выглядеть следующим образом:
В итоге визуально веб-страница будет выглядеть так:
Кроме директивы ng-click , предназначенной для обработки кликов по элементам, имеется еще ряд директив:
ng-blur : определяет поведение для события blur , которое возникает при потере элементом фокуса
ng-focus : определяет поведение для события focus , которое возникает при получении фокуса элементом
ng-change : определяет поведение для события change , которое возникает при изменении элементом состояния, например, при нажатии на элемент input type=»checkbox»
ng-submit : определяет поведение для события submit , которое возникает при отправке формы
ng-copy/ng-cut/ng-paste : определяет поведение для событий копирования, вырезки и вставки соответственно
ng-dblclick : та же ng-click, только обрабатывается двойное нажатие
ng-mousedown : для обработки нажатия клавиши мыши
ng-mouseup : для обработки отжатия мыши
ng-mouseenter : для обработки наведения курсора в определенную область
ng-mouseleave : для обработки ухода курсора с определенной области
ng-mousemove : для обработки перемещения курсора мыши
ng-keydown : обработка нажатия клавишы клавиатуры
ng-keypress : обработка нажатия клавишы клавиатуры
ng-keyup : обработка отжатия клавишы клавиатуры
javascript — Как прослушать событие в компоненте AngularJS?
В AngularJS мы можем транслировать и прослушивать события:
Есть ли способ прослушать события внутри компонента?
То, что я хочу достичь, — это выполнить некоторые действия над множеством компонентов, которые повторяются внутри формы. Ng-повтор повторяется по какой-то модели, конечно. Некоторые данные модели привязаны к компоненту. Легко привязать функцию к компоненту, поэтому компонент может выполнять некоторую логику, но противоположное направление не кажется таким простым.
-
2 2
- 14 май 2020 2020-05-14 09:57:39
- Landeeyo
2 ответа
Вы можете передать $ event в качестве параметра для функции
Результатом будет [объект MouseEvent]
- 14 май 2020 2020-05-14 09:57:40
- Wintergreen
Я думаю, что ваш лучший выбор — использовать стандартное событие, излучающее $emit() и $broadcast() . Начиная с angualr 1.5, были введены новые крючки и синтакс, но внутри компонента вы всегда можете вводить $rootScope и $scope и обрабатывать любые события, как вы привыкли в угловом $doCheck который запускает каждый цикл дайджеста, в отличие от старый механизм часов, вы должны сохранить свою старую ценность и сравнить ее с новой.
Как прослушивать события клавиатуры в Angular: основы использования псевдо-событий
24 просмотра
2 ответа
24 Репутация автора
Я пытаюсь передать данные от одного компонента другому, но я не знаю, как это сделать.
(Я хочу передать данные из sidenav в Компонент маршрутизации.) Я начал с использования @input, но мои компоненты не являются родительскими. У меня есть компонент макета, который включает заголовок навигации, боковую навигацию и содержимое маршрутизации. Я также пробовал localStorage, но данные, передаваемые моему contentComponent, не очень хорошие. Я нажимаю на элемент из sidenav и хочу передать эти данные в компонент routingComentent, чтобы запросить API в соответствии с этими данными. Когда я нажимаю на элемент, я загружаю другие элементы в боковую панель, и я хочу передать их, выбрасывая новый список элементов (то есть загружается, когда я загружаю contentComponent). Я не знаю, как передать новый предмет там.
то, что я хочу передать, это загрузить в конце функции (подписаться). Но я не знаю, как с этим бороться. Я только что передал старое значение, выбранное для локального хранилища. Я не знаю, достаточно ли я ясен. Я могу попытаться объяснить лучше, если вы запутались. Спасибо за помощь
Ответы (2)
плюса
8432 Репутация автора
просто другой компонент должен иметь свойство типа eventemitter и декорироваться @Output декоратором
теперь, чтобы подписаться на готовое событие из шаблона из другого компонента, такого как приложение
Информационный портал по безопасности
События в Angular Light
Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js.
В Angular Light есть директивы обработки событий: al-click, al-dblclick, al-submit, al-blur, al-change, al-focus, al-keydown, al-mousedown, al-mouseenter и т.д. Как видите под каждое отдельное событие создается отдельная директива, а если директивы нет под какое-то событие, то приходилось делать директиву вручную и это не эффективно. Поэтому было принято решение сделать возможность обрабатывать любые события одним способом. Рассматривались разные варианты (например al-on=»keypress=onclick($event,$element), mousedown=onMouseMove()» ), в итоге остановились на варианте, который используется (или похож) в других фреймворках.
И сокращенный вариант:
Так же можно использовать модификторы, которыми можно фильтровать события, делать альясы или менять их поведение, пример:
Для событий keydown, keypress, keyup доступны такие модификаторы: enter, tab, delete, backspace, esc, space, up, down, left, right либо можно указать любой код числом. И доп. клавиши: alt, ctrl (или control), shift, meta. В итоге можно сделать такой пример без дополнительного js.
Для всех событий доступны модификаторы: stop (вызывает stopPropagation), prevent (вызывает preventDefault), noscan (отменяет вызов $scan для события).
throttle и debounce
Также среди модификаторов есть throttle и debounce, теперь любое событие можно сделать «отложенным», примеры:
Т.к. для события используется отдельный атрибут, то это позволяет подписываться на одно и тоже событие несколько раз, за счет этого можно получить разные эффекты:
Пользовательские модификаторы
Если стандартных модификаторов не хватает, то можно сделать свои. Пример модификатора который выполняет роль алиаса событий, т.е. объединяет события keydown и blur в один myevent:
Пример модификатора как фильтр, которое срабатывает при нажатии Enter:
Такой модификатор можно использовать как фильтр — пример , либо как псевдо событие — пример .
Кроме того можно интегрировать любые дополнительные библиотеки, например библиотека touch событий Hammer.js, события tap и pan, пример .
Так же появились универсальная обработка атрибутов, шаблонов, бета версия компонент и роутера в стиле reactjs, и ещё много разных мелочей, но это в следующих статьях.
Связующие события клавиатуры в AngularJS
Что такое идеальный способ связать клавиатуры события нажатия клавиш, если вы используете AngularJS?
Сейчас я устанавливаю отображение событий клавиатуры внутри контроллера .
Я начинаю думать, что есть лучшая практика, когда дело доходит до прикрепления событий клавиатуры внутри из AngularJS приложения.
Должен ли я использовать element.bind и настройку событий клавиатуры внутри соответствующих директив вместо?
Заранее спасибо за вашу помощь!
Где вы пытаетесь захватить эти события? Является ли это в глобальном масштабе или просто что-то конкретное?
Вот пример того, ограничивающее поле ввода даты ключей.
Тогда вы просто украсить свой входной тег как
Как прослушать событие в компоненте AngularJS?
В AngularJS мы можем транслировать и прослушивать события:
Есть ли способ прослушать события внутри компонента?
То, что я хочу достичь, — это выполнить некоторые действия над множеством компонентов, которые повторяются внутри формы. Ng-повтор повторяется по какой-то модели, конечно. Некоторые данные модели привязаны к компоненту. Легко привязать функцию к компоненту, поэтому компонент может выполнять некоторую логику, но противоположное направление, похоже, не так просто.
Как прослушивать событие в компоненте AngularJS?
В AngularJS мы можем транслировать и прослушивать событие:
Есть ли способ для прослушивания событий внутри компонента?
То, что я хочу добиться того, чтобы выполнить какое-либо действие на множество компонентов, которые повторяются внутри формы. Ng-повтор перебирает какой-то модели, конечно. Некоторые данные модели связаны с компонентом. Это легко связать функцию компонента, поэтому компонент может выполнить некоторую логику, но в противоположном направлении, кажется, не так легко.
Я думаю , что вам лучше всего продолжать использовать стандартное событие , излучающий с $emit() и $broadcast() . От angualr 1.5, некоторые новые крючки и синтаксис были введены , но внутри компоненты всегда можно вводить $rootScope и $scope , и обработку событий , как вы привыкли в угловом $doCheck который срабатывает каждый переваривать цикл, в отличии от старого часовой механизм необходимо сохранить старое значение и сравнить его с новым.
Для прослушивания события в AngularJs, использовать обработку событий директивы как нг-клик, нг-изменение и т.д. Это будет полностью зависеть от типа события вы хотите захватить. Для Ex:
Внутри вашего компонента tmeplate добавьте ниже HTML.
Определение функции внутри класса компонента.
Для получения более подробной информации о AngularJS — обработка событий проверить ссылку:
Блог Makeomatic: разработка сайтов и мобильных приложений
Разбираемся с системой событий $emit, $broadcast и $on в $scope и $rootScope Ангуляра
$emit , $broadcast и $on Ангуляра попадают под общий концепт “publish/subscribe”, так же называемый “могу сделать”, в которой вы публикуете событие и подписываетесь/отписываетесь от него еще где-то. Система событий в AngularJS великолепна, что делает вещи безупречными и легкими в исполнении (как и следовало ожидать!), но концепт, который стоит за этой простотой не так легок для освоения в совершенстве, поэтому очень часто у вас будет возникать недоумение по поводу того, почему все работает не так, как вы думаете.
Для тех, кому работа с Ангуляром в новинку, и кто не использовал или не видел $emit , $broadcast или $on , поясним, что они делают, перед тем, как мы рассмотрим $scope и $rootScope отношения событий, областей видимости и того, как корректно применить данную систему событий, а так же поймем, что же действительно происходит.
$scope.$emit вверх, $scope.$broadcast вниз
Используя $scope.$emit — событие запускается вверх по области видимости. Используя $scope.$broadcast — событие запускается вниз по области видимости. Когда мы используем $scope.$on — мы “подписываемся” на прослушивание данных событий. Быстрый пример:
$scope.($emit/$broadcast)
Ключевой момент для запоминания при использовании $scope для запуска ваших событий — это то, что они будут коммуницировать только с непосредственной родительской областью видимости или с ближайшими потомками! При этом области видимости не всегда потомки или родители: у нас могут быть “братские” области видимости, к примеру, с одним и тем же родителем. Используя $scope для запуска, мы пропустим такие области видимости и запустим его лишь вниз или вверх, но никогда не по сторонам.
Самый простой путь имитации родительских и дочерних областей видимости — использовать контроллеры. Каждый контроллер создает новый $scope , который Ангуляр аккуратно выводит для нас в виде класса ng-scope на элементах, с новыми областями видимости:
Мы могли бы запустить событие вниз из ParentCtrl в SiblingOneCtrl , используя $broadcast :
Если бы мы захотели передать сигнал вверх, из SiblingOneCtrl в ParentCtrl , как вы уже догадались, вы можете использовать $emit .
Чтобы продемонстрировать как $scope работает, в момент запуска события, вот простая иерархия:
Если SiblingTwoCtrl запустил $scope.$broadcast , тогда SiblingOneCtrl никогда не узнает, что случилось. Это может быть помехой, ее можно исправить, поставив небольшой костыль:
$scope.$parent.$broadcast(‘myevent’, ‘Some data’);
Данный код обращается к ParentCtrl и уже оттуда запускает событие через $broadcast
$rootScope.($emit/$broadcast)
Если вам все еще просто, то давайте добавим $rootScope . $rootScope — родительский элемент всех областей видимости, который делает каждый вновь созданный $scope его потомком! Выше я упомянул о том, как $scope ограничен в направлениях распространения событий, а вот $rootScope — это то, как мы можем с легкостью передавать сигнал через все области видимостей. Данный подход будет решать некоторые проблемы с большей легкостью. К сожалению, все не настолько просто, как с передачей событий вверх или вниз…
$rootScope.$emit против $rootScope.$broadcast
Объект $rootScope имеет аналогичные методы $emit , $broadcast и $on , но они работают немного иначе, нежели в $scope . Так как $rootScope не имеет $parent (родительской области видимости), использование $emit было бы бессмысленным. Вместо этого $rootScope.$emit запустит событие только для слушателей, подписанных через $rootScope.$on . Самое интересное в том, что $rootScope.$broadcast уведомит как все $rootScope.$on , так и $scope.$on слушателей и это тонкое, но очень важное отличие, которое поможет избежать проблем с вашим приложением.
$rootScope примеры
Давайте рассмотрим еще более глубокую иерархию:
В примере выше есть 3 лексические области видимости (где родительские области видимости доступны в текущей области видимости, несколько разрывает голову при мысли об этом с точки зрения определения областей видимостей в DOM, но концептуально то что нам нужно там) и 4 области видимости в Ангуляре: ParentCtrl , SiblingOneCtrl , SiblingTwoCtrl и ChildCtrl . Две “братские” области видимости.
Используя $scope.$emit внутри ChildCtrl выльется в то, что только SiblingTwoCtrl и ParentCtrl получат уведомления, так как событие вообще не распространилось на сиблингов, и затронуло лишь прямых предков (полностью игнорируя SiblingOneCtrl ). Если бы мы использовали $rootScope , тогда бы мы могли затронуть и слушателей событий в $rootScope .
Отписываемся от событий в Angular.JS
unsubscribe — часто системы событий в AngularJS. Вы можете прекратить прослушку событий в любое время со слушателем $on . В отличие от других библиотек, здесь нет $off метода. Документация Ангуляра не особо внятно объясняет нам то, как правильно “прекращать прослушку”, она говорит, что $on “Возвращает функцию отмены регистрации для слушателя событий.” Мы можем предположить, что под этим они подразумевают замыкание, которое позволит нам прекращать прослушку событий.
Внутри исходного кода v1.3.0-beta.11, мы можем определить местонахождение $on метода и подтвердить подозрения на наличие замыкания:
Мы можем подписать и прекратить прослушку событий очень простым способом:
$scope.$on $destroy
Когда мы используем $rootScope.$on , нам нужно отключать этих слушателей каждый раз, когда $scope уничтожается. Слушатели $scope.$on автоматически высвобождаются, но нам понадобится вызывать вышеупомянутое замыкание вручную в событии $destroy :
Отмена событий
Если вы выбрали использование $emit , один из слушателей событий в $scope может отменить его, и предотвратить распространение события вверх по цепочке. При использовании $broadcast событие не может быть отменено! Отмена события, которое было отправлено через $emit выглядит следующим образом:
$rootScope.$$listeners
У каждого объекта AngularJS есть некоторые свойства, мы можем покопаться в них и наблюдать за тем, что случается “под капотом”. Мы можем взглянуть на $rootScope.$$listeners , чтобы наблюдать за жизненным циклом слушателей.
Мы так же можем прекратить прослушку событий с его помощью (но я бы не советовал вам этого делать):
Распределение событий по пространствам имен
Обычно, если я работаю над конкретной фабрикой, я коммуницирую с другими директивами, контроллерами или даже фабриками, используя выделенное пространство имен для более чистой имплементации pub/sub , что делает код последовательным и позволяет избегать конфликтов имен.
Если бы я строил email приложение с ящиком входящих сообщений, то мы могли бы использовать пространство имен inbox для этого специального раздела. Это легко иллюстрируется несколькими простыми примерами:
Как прослушать событие mousemove на объекте документа в Angular
я реализую функцию перетаскивания в угловое приложение:http://jsfiddle.net/Jjgmz/1/
часть его, чтобы слушать mousemove событие для объекта документа.
как я могу прослушивать объект документа внутри компонента?
давайте представим, что это содержание компонента.HTML-файл:
Я использую угловой 4.
1 ответов
1) с помощью @HostListener (docs). Это предпочтительный метод, которого должно быть достаточно большую часть времени.
2) аналогично выше, вы также можете использовать (document:event)=»handler» на любом элементе DOM, но вышеупомянутое решение предпочтительнее, потому что код чище. Используя это, не сразу очевидно из класса, что у вас есть глобальный прослушиватель событий, и вы можете добавить дополнительные без необходимости.
3) (docs)-это решение более низкого уровня; полезно, когда вы не хотите загромождать свой код методами, но имеете дело с даже в другом месте, например, в крючке, как показывает следующий фрагмент. Однако будьте осторожны, поскольку вам все равно нужно удалить прослушиватель событий, чтобы предотвратить утечку памяти; либо сделайте это, когда вы знаете, что он вам больше не понадобится, либо в крючке OnDestroy.
4) альтернативой первого примера является хоста собственность, который обескураженный руководством по угловому стилю, так как теперь вы отслеживаете имя функции в двух местах, которые могут быть очень далеки друг от друга физически в коде. Предпочитайте первую версию, когда это возможно.