标签：variable hang strong 官网 不用 inf 焦点 绑定 使用
1)最简单的表单click事件(不用传参)
1 @Component({ 2 selector: ‘click-me‘, 3 template: ` 4 <button (click)="onClickMe()">Click me!</button> 5 {{clickMessage}}` 6 }) 7 export class ClickMeComponent { 8 clickMessage = ‘‘; 9 10 onClickMe() { 11 this.clickMessage = ‘You are my hero!‘; 12 } 13 }
2)利用event对象将用户输入的值传入到组件Component中(不推荐)
1 @Component({ 2 selector: ‘click-me‘, 3 template: ` 4 <input (keyup)="onKey($event)"> 5 <p>{{values}}</p>` 6 }) 7 export class ClickMeComponent { 8 values = ‘‘; 9 10 onKey(event: any) { // without type info 11 this.values += event.target.value + ‘ | ‘; 12 } 13 }
不指定onKey方法的参数event可以预防很多未知的错误.如果指定具体的参数类型:
1 onKey(event: KeyboardEvent) { // with type info 2 this.values += (<HTMLInputElement>event.target).value + ‘ | ‘; 3 }
在使用value属性之前要将event.target声明为HTMLInputElement类型,因为不是所有的对象都有value属性.
3) 使用模板参考变量(template reference variable) (推荐)
直接传递event事件太过于复杂,可以为表单元素先声明id,然后使用模板参考变量关联模板与组件.
不需要绑定到组件,也不需要组件做任何事情就可以在Template中获取到用户输入的值. 要注意的是只有当APP处理异步事件比如键盘敲击事件时,才会更新绑定数据. 所以下面代码中的(keyup)事件不可以省略但可以更换成任意事件比如,change,keypress等等. keyup事件不需要做任何事件,所以只是声明成最简短的(keyup)=‘0‘就可以了. 另外,这里的box即为 input元素本身.
注意:同一页面中表单元素#id 如同 DOM元素id一样,也应该是唯一的. 如果有相同的#id,angular虽然不会报错,但是值会错乱.
1 @Component({ 2 selector: ‘loop-back‘, 3 template: ` 4 <input #box (keyup)="0"> 5 <p>{{box.value}}</p> 6 ` 7 }) 8 export class LoopbackComponent { }
传参的话,只要把box.value传给组件方法中即可.
1 @Component({ 2 selector: ‘key-up2‘, 3 template: ` 4 <input #box (keyup)="onKey(box.value)"> 5 <p>{{values}}</p> 6 ` 7 }) 8 export class KeyUpComponent_v2 { 9 values = ‘‘; 10 onKey(value: string) { 11 this.values += value + ‘ | ‘; 12 } 13 }
4)伪事件:key.enter--监听enter键
keyup监听每次键盘敲击抬起事件.enter键代表用户输入完成,所以有时候实际运用中我们只要监听enter键是否被敲击. angular中提供了简单的key.enter伪事件,帮我们省去了很多麻烦.(最起码不用再通过if一个个判断用户敲击的是不是enter建了).
1 @Component({ 2 selector: ‘key-up3‘, 3 template: ` 4 <input #box (keyup.enter)="onEnter(box.value)"> 5 <p>{{value}}</p> 6 ` 7 }) 8 export class KeyUpComponent_v3 { 9 value = ‘‘; 10 onEnter(value: string) { this.value = value; } 11 }
注意:key.enter泛指keyup.enter或者keydown.enter. 不要真的写key.enter......另外测了下,keypress.enter监听不到enter事件.也不知是什么原理.
上面的‘栗子‘有个BUG,那就是如果用户输入完成了,并没有按enter键怎么办,比如说用户只是输入完成后点击了页面其它位置,input输入框失去了焦点. 对的.没错,再给input输入框绑定blur事件就好啦. 同样是绑定到onEnter方法上
1 @Component({ 2 selector: ‘key-up3‘, 3 template: ` 4 <input #box (keyup.enter)="onEnter(box.value)" (blur)="onEnter(box.value)"> 5 <p>{{value}}</p> 6 ` 7 }) 8 export class KeyUpComponent_v3 { 9 value = ‘‘; 10 onEnter(value: string) { this.value = value; } 11 }
官网上有一个例子:用户输入完成后,将输入的值新增到heroes中, 并显示出来.
1 @Component({ 2 selector: ‘little-tour‘, 3 template: ` 4 <input #newHero 5 (keyup.enter)="addHero(newHero.value)" 6 (blur)="addHero(newHero.value); newHero.value=‘‘ "> 7 8 <button (click)="addHero(newHero.value)">Add</button> 9 10 <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul> 11 ` 12 }) 13 export class LittleTourComponent { 14 heroes = [‘Windstorm‘, ‘Bombasto‘, ‘Magneta‘, ‘Tornado‘]; 15 addHero(newHero: string) { 16 if (newHero) { 17 this.heroes.push(newHero); 18 } 19 } 20 }
其实我觉得,这个例子中,blur事件不应该绑定. 因为已经有button提供给用户点击了,不必要再监听blur事件,更何况blur事件如果绑定的话,点击button的时候会触发两次addHero方法. 一次click触发的,一次blur触发的.
另外如果按enter键会自动提交表单,这个只需要添加form标签包裹表单元素就好,至于submit事件要不要写看需求; 上面两步都做了以后,还有可能按enter添加的时候仍然会触发两个addHero方法. 这个时候就要指明button的type类型是简单的button. 不然enter还会触发一次button的click事件.
1 @Component({ 2 selector: ‘little-tour‘, 3 template: ` 4 <form #loginForm="ngForm"> 5 <input #newHero 6 (keyup.enter)="addHero(newHero.value)" 7 newHero.value=‘‘ "> 8 9 <button type="button" (click)="addHero(newHero.value)">Add</button> 10 </form> 11 <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul> 12 ` 13 }) 14 export class LittleTourComponent { 15 heroes = [‘Windstorm‘, ‘Bombasto‘, ‘Magneta‘, ‘Tornado‘]; 16 addHero(newHero: string) { 17 if (newHero) { 18 this.heroes.push(newHero); 19 } 20 } 21 }
标签：variable hang strong 官网 不用 inf 焦点 绑定 使用
原文地址：http://www.cnblogs.com/kiyo/p/7526144.html
