码迷,mamicode.com
首页 > 其他好文 > 详细

Angular2组件开发—模板语法(五)

时间:2015-12-11 14:48:50      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

(event) - 监听事件

在模板中为元素添加事件监听很简单,使用一对小括号包裹事件名称,并绑定 到表达式即可:

技术分享

上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。

另一种等效的书写方法是在事件名称前加on-前缀:

1 @View({template : `<h1 on-click="onClick()">HELLO</h1>`})

例如:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>template - bind propery</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <ez-app></ez-app>
12     
13     <script type="module">
14         import {Component,View,bootstrap} from "angular2/angular2";
15 
16         @Component({selector:"ez-app"})
17         @View({
18             template:`    
19                 <h1>Your turn! <b>{{sb}}</b></h1>
20                 <button (click)="roulette()">ROULETTE</button>
21                `
22         })
23         class EzApp{
24             constructor(){
25                 this.names = ["Jason","Mary","Linda","Lincoln","Albert","Jimmy"];
26                 this.roulette();
27             }
28             //轮盘赌
29             roulette(){
30                 var idx = parseInt(Math.random()*this.names.length);
31                 this.sb = this.names[idx];
32             }
33         }
34                 
35         bootstrap(EzApp);
36 
37     </script>
38 </body>
39 </html>

 

Angular2组件开发—模板语法(五)

标签:

原文地址:http://www.cnblogs.com/gett/p/5038760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!