angular2 学习二 (event) - 监听事件
angular2 学习二 (event) - 监听事件
王福林 发表于1年前
angular2 学习二 (event) - 监听事件
  • 发表于 1年前
  • 阅读 77
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

(event) - 监听事件

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

event-bind

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

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

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

修改示例代码,点击EzApp组件的h1标题时,自动变换名称!

HTMl

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>template - bind propery</title>
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
	<ez-app></ez-app>
    
    <script type="module">
    	import {Component,View,bootstrap} from "angular2/angular2";

        @Component({selector:"ez-app"})
        @View({
			template:`	
            	<h1>Your turn! <b>{{sb}}</b></h1>
            	<button (click)="roulette()">ROULETTE</button>
           	`
		})
        class EzApp{
        	constructor(){
            	this.names = ["Jason","Mary","Linda","Lincoln","Albert","Jimmy"];
                this.roulette();
            }
            //轮盘赌
            roulette(){
            	var idx = parseInt(Math.random()*this.names.length);
                this.sb = this.names[idx];
            }
        }
                
        bootstrap(EzApp);

    </script>
</body>
</html>

 

CSS

button{width:100%;padding:10px;}b{color:red}

 

共有 人打赏支持
粉丝 9
博文 92
码字总数 34910
×
王福林
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: