angularjs2 五

import {Component} from 'angular2/core';
import {ClickMeComponent} from './click-me';
import {KeyUpComponent} from './keyup';
import {LoopbackComponent} from './loopback';
import {FocusComponent} from './focus';

@Component({
selector: 'appTest',
template: `
<h1>Angular 2 App</h1>
<click-me></click-me>
<key-up></key-up>
<h2>loopback</h2>
<loopback></loopback>
<h2>myfocus</h2>
<myfocus></myfocus>
`,
directives: [ClickMeComponent,KeyUpComponent,LoopbackComponent,FocusComponent],
})
export class App {

}

/**
* Created by dell on 2016/9/8.
*/
import {Component} from 'angular2/core';
@Component({
selector: 'click-me',
template: `
<button (click)="onClickMe()">Click me!</button>
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe(){
this.clickMessage ='欢迎来到Angular 2.0 !';
}
}

/**
* Created by dell on 2016/9/8.
*/

import {Component} from 'angular2/core';

@Component({
selector: 'key-up',
template: `
<input #box
(keyup.enter)="values=box.value"
(blur)="values=box.value">
<p>{{values}}</p>
`
})
export class KeyUpComponent {
values='';
onKey(event:any) {
this.values += event.target.value + ' | ';
}
}

/**
* Created by dell on 2016/9/8.
*/
import {Component} from 'angular2/core';

@Component({
selector: 'loopback',
template: `
<input #box (keyup)="0">
<p>{{box.value}}</p>
`
})
export class LoopbackComponent  {

}

/**
* Created by dell on 2016/9/8.
*/
import {Component} from 'angular2/core';

@Component({
selector: 'myfocus',
template: `
<p>{{values}}</p>
<input #box (focus)="values='请输入您的地址' ">

`
})
export class FocusComponent {
values='';
}