👻 DeathGhost

Angular 装饰器 HostListener 监听DOM事件

这篇文章发布于

DeathGhost 编辑, 归类于ANGULAR » 当前评论0条。

Angular 装饰器 HostListener 监听DOM事件,本例监听回车键(Enter)与换行按键(Ctrl Enter)事件处理发送消息示例。

一直用Angular前端框架做项目,UI借用第三方库,在处理过程中很少操作相关基础,更多是在业务层面上。

因此工作中遇到此类将其记录下来作为学习过程。

@HostListener() 装饰器

Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.

eventName: string  The DOM event to listen for.

args:  A set of arguments to pass to the handler method when the event occurs.

参考这里

示例场景

聊天窗口发送消息按键,回车(Enter)发送消息,换行(Ctrl Enter)对其文本换行。

Angular HostListener
Angular HostListener 监听回车事件

使用方法

在当前所需组件中从@angular/core导入HostListener

显示图如上述场景,按回车(Enter)键发送消息,按Ctrl Enter键换行输入消息。

发送消息窗口示例图
发送消息窗口示例图
import { Component, OnInit, HostListener, Input } from '@angular/core';
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
    if (event.ctrlKey && event.key === 'Enter') {
      if (this.inputValue.trim() === '') {
        return;
      }
      this.inputValue  = '\n';
    } else if (event.key === 'Enter') {
      event.preventDefault();
      if (this.inputValue.trim() === '') {
        return;
      }
      this.inputValue = '';
      console.log('发送消息');
    }
    if (event.type === 'click') {
      this.inputValue = '';
      console.log('发送消息');
      return;
    }
  }
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕

"新码笔记"微信公众号🤳

Web前端实时信息尽在掌握之中

🟢同意 🔴拒绝