1 at first, we use the (keyup) event handler to update the modify
@Component({
selector: ‘my-app‘
})
@Template({
inline: ‘<h1>{{myName}}</h1>‘ +
‘<input type="text" #newname (keyup)/>‘ +
‘<h3 [style.color]="newname.value">{{newname.value}}</h3> ‘
})
but, if i wanna do something more when I use the keyup in all the input keyup?
we use the Decorator to decorator the event
2 import the Decorator
import {Component, Template, bootstrap, Decorator} from ‘angular2/angular2‘;
3 define the Decorator
@Decorator({
selector: ‘input‘,
events: {‘keyup‘: ‘onKeyUp()‘}
})
class InputDecorator {
onKeyUp() {
console.log(‘do nothing‘);
}
}
4 use the decorator
@Template({
inline: ‘<h1>{{myName}}</h1>‘ +
‘<input type="text" #newname />‘ +
‘<input type="text" #test/>‘ +
‘<h3 [style.color]="newname.value">{{newname.value}}</h3> ‘,
directives: [InputDecorator]
})
5 the whole page code
import {Component, Template, bootstrap, Decorator} from ‘angular2/angular2‘;
@Decorator({
selector: ‘input‘,
events: {‘keyup‘: ‘onKeyUp()‘}
})
class InputDecorator {
onKeyUp() {
console.log(‘do nothing‘);
}
}
@Component({
selector: ‘my-app‘
})
@Template({
inline: ‘<h1>{{myName}}</h1>‘ +
‘<input type="text" #newname />‘ +
‘<input type="text" #newnam />‘ +
‘<h3 [style.color]="newname.value">{{newname.value}}</h3> ‘,
directives: [InputDecorator]
})
class MyApp {
constructor() {
this.myName = ‘Jackey‘;
this.myFriends = [
{name: ‘Jackey1‘, age: 25},
{name: ‘Jackey2‘, age: 26}
];
}
}
bootstrap(MyApp);
原文：http://www.cnblogs.com/lihaozhou/p/4663067.html