Angular6+ 事件绑定

临近毕业开始了第二段实习，因为项目需求，技术栈从Vue转到Angular，才发现Angular已经到7了？？？？？，我两年前还是2来着，看来VAR（Vue、Angular、React）老大哥的压力还是很大的，这系列文章也记录一下我重拾Angular的过程。

1. 事件绑定的基础语法

或者可以使用带 on-前缀的形式

On Save

添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

selectedHero: Hero;
onSelect(hero: Hero): void {this.selectedHero = hero;
}

2. 为事件起别名（不推荐）

@Directive({
outputs: ['clicks:myClick']  // propertyName:alias
})

click with myClick

3. $event和事件处理语句

事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件， \$event就是 DOM 事件对象，它有像 target 和 target.value 这样的属性。

input 中的值发生改变后，会对 hero.name中的值进行更新。
是不是似曾相识？是的，这就是 Angular 中的双向绑定。

name:  

4. 通过@HostListenr 把事件绑定在宿主监听器上

把一个事件绑定到一个宿主监听器，并提供配置元数据。 当宿主元素发出特定的事件时，Angular 就会执行所提供的处理器方法，并使用其结果更新所绑定到的元素。 如果该事件处理器返回 false，则在所绑定的元素上执行 preventDefault。

Click 事件

import {..., HostListener} from '@angular/core';...@Directive({ selector: "button[counting]" })
class CountClicks {numberOfClicks = 0;@HostListener("click", ["$event.target"])onClick(btn) {console.log("button", btn, "number of clicks:", this.numberOfClicks++);}
}@Component({selector: "app",template: "Increment"
})
class App {}

Scroll 事件

@HostListener('window:scroll', ['$event'])onScroll() {this.pageYOffset = window.pageYOffset;}

5. 使用 EventEmitter 实现自定义事件（父子组件间事件传递）

后面再起一章单独讲 Angular 的组件通信

子组件触发事件 Output

 {{prefix}} {{hero?.name}} Delete

deleteRequest = new EventEmitter();delete() {this.deleteRequest.emit(this.hero);}

父组件接受事件 Input

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！