angularjs 五

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='';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!