共计 1814 个字符，预计需要花费 5 分钟才能阅读完成。
Angular6+ 事件绑定
临近毕业开始了第二段实习，因为项目需求，技术栈从 Vue 转到 Angular，才发现 Angular 已经到 7 了？？？？？，我两年前还是 2 来着，看来 VAR（Vue、Angular、React）老大哥的压力还是很大的，这系列文章也记录一下我重拾 Angular 的过程。
1. 事件绑定的基础语法
<li *ngFor=”let hero of heroes” (click)=”onSelect(hero)”></li>
或者可以使用带 on- 前缀的形式
<button on-click=”onSave()”>On Save</button>
添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
2. 为事件起别名（不推荐）
@Directive({
outputs: [‘clicks:myClick’] // propertyName:alias
})
<div (myClick)=”clickMessage=$event” clickable>click with myClick</div>
3. $event 和事件处理语句
事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件，\$event 就是 DOM 事件对象，它有像 target 和 target.value 这样的属性。
<input [value]=”hero.name” (input)=”hero.name=$event.target.value” />
input 中的值发生改变后，会对 hero.name 中的值进行更新。是不是似曾相识？是的，这就是 Angular 中的双向绑定。
<div>
<label>name: <input [(ngModel)]=”hero.name” placeholder=”name” /> </label>
</div>
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: “<button counting>Increment</button>”
})
class App {}
Scroll 事件
@HostListener(‘window:scroll’, [‘$event’])
onScroll() {
this.pageYOffset = window.pageYOffset;
}
5. 使用 EventEmitter 实现自定义事件（父子组件间事件传递）
后面再起一章单独讲 Angular 的组件通信
子组件触发事件 Output
<div>
<img src=”{{heroImageUrl}}” />
<span [style.text-decoration]=”lineThrough”> {{prefix}} {{hero?.name}} </span>
<button (click)=”delete()”>Delete</button>
</div>
deleteRequest = new EventEmitter<Hero>();
delete() {
this.deleteRequest.emit(this.hero);
}
父组件接受事件 Input
<app-hero-detail
(deleteRequest)=”deleteHero($event)”
[hero]=”currentHero”
></app-hero-detail>
