Angular 事件之 TS、HTML中写法 | 更文挑战第13天

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

TS 中添加事件监听方法

1. HostListener 监听点击事件

import { HostListener } from "@angular/core";
export class xxx {
    @HostListener('window:click', ['$event.target'])
    onClick(targetElement: string) {
      console.log(`You clicked on`, targetElement);
    }
}

• click表示我们要处理这个a的点击事件，
• 包裹 click 的() 圆括号是说发生此事件时，调用等号后面的表达式或函数。
• 等号后面的 onClick() 是我们定义在组件中的函数名字。

2. 监听滚动事件

主要用到scroll，有滚动条并且窗口滚动才出发。

import { Subscription, fromEvent,  } from "rxjs";

export class xxx {
    scroll$: Subscription;
    
    constructor() {
        this.scroll$ = fromEvent(window, 'scroll').pipe(
          debounceTime(50)
        ).subscribe((event) => {
           this.onWindowScroll(event);
        });
    }
    
    onWindowScroll(event){
        console.log("event", event);
    }
}

3. 监听窗口大小变化事件

 fromEvent(window, 'resize');

方法2

import { Subject } from "rxjs";
import { debounceTime, throttleTime } from "rxjs/operators";

resizeEvent$: Subject<MouseEvent> = new Subject<MouseEvent>();
@HostListener('window:resize', ['$event'])
onResize(event){
    this.resizeEvent$.next(event);
}

this.resizeEvent$.pipe(throttleTime(500),debounceTime(490)).subscribe(res=>
  console.log()
);

4. 监听右键点击事件

如果是window:contextmenu则是监听window的右键点击事件，若是contextmenu则是监听某个元素（组件）的点击事件

import { HostListener } from "@angular/core";

@HostListener("window:contextmenu", ["$event"])
onLisenerRightClick(event) {
    event.preventDefault();
    this.showRightMenu = false;
}

5. 监听粘贴事件

@HostListener('paste', [])
onPaste() {
    // TODO STH
}

6. 监听双击事件

如果是window:dblclick则是监听window的双击事件

import { HostListener } from "@angular/core";

@HostListener("window:dblclick", ["$event"])
ondblclick(event) {
    event.preventDefault();
}

HTML 中事件写法

angular中事件的写法格式是

<p (eventName)="yourEventName()"></p>

1. 点击事件写法及说明

<a  (click)='onClick()'> 点击事件  </a> 

• click表示我们要处理这个a的点击事件，
• () 圆括号是说发生此事件时，调用等号后面的表达式或函数。
• 等号后面的 onClick() 是我们定义在组件中的函数名字。

2. 右键点击自定义菜单

在html元素中绑定右击事件

<div  (contextmenu)="onRightClick($event)">我是一个节点</div>

在js中定义事件处理方法，其中event.preventDefault()可以阻止默认右键菜单的出现。

onRightClick(event) {
    event.preventDefault();
    console.log("右键点击了");
}

3.输入框enter事件

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

更多用法更新于 github