angualrCli的事件

在angualar中的时间都是用括号括起来的.例如(click). 在angular中时间写在模版里面,要让外面能够访问到的话就要用一个方法来传递出去,可以带参数也可以不带参数.例如(click)="onClickMe()"

只要在类里面这样写就可以触发点击事件

export class ClickMeComponent {
clickMessage = '';

onClickMe() {
this.clickMessage = 'You are my hero!';
}
}

接下来列举一下常用的事件:　　　　1点击事件 　　(click)="onClickMe()"

　　　　　　　　　　　　　　 　　2键盘按下事件 　　(keyup)="onKey(box.value)" 按回车触发

(keyup)="onKey($event)"   

onKey(event: KeyboardEvent) { // with type info
this.values += (<HTMLInputElement>event.target).value + ' | ';
}  这个只要键盘按下就会触发

　　　　　　　　　　　　　　　　3 Type away! Press [enter] or click elsewhere when done.(点击或则按回车都会触发)

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

　　　　　　　　　　　　　　　　4 (blur)="addHero(newHero.value) 失去焦点的时候触发