angular2 学习二 [property] - 绑定属性
angular2 学习二 [property] - 绑定属性
王福林 发表于1年前
angular2 学习二 [property] - 绑定属性
  • 发表于 1年前
  • 阅读 71
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

[property] - 绑定属性

在模板中,也可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式, 当表达式的值变化时,对应的DOM对象将自动得到更新:

property bind

等价的,你也可以使用bind-前缀进行属性绑定:

 
  1. @View({template:`<h1 bind-text-content="title"></h1>`})

很容易理解,通过属性,应用相关的数据流入组件,并影响组件的外观与行为。

需要注意的是,属性的值总是被当做调用者模型中的表达式进行绑定,当表达式变化时,被 调用的组件自动得到更新。如果希望将属性绑定到一个常量字符串,别忘了给字符串加引号,或者, 去掉中括号:

 
  1. //错误,Angular2将找不到表达式 Hello,Angular2
  2. @View({template:`<h1 [text-content]="Hello,Angular2"></h1>`})
  3. //正确,Angular2识别出常量字符串表达式 'Hello,Angular2'
  4. @View({template:`<h1 [text-content]="'Hello,Angular2'"></h1>`})
  5. //正确,Angular2识别出常量字符串作为属性textContent的值
  6. @View({template:`<h1 text-content="Hello,Angular2"></h1>`})

修改示例代码,使EzApp组件的标题颜色每秒钟随机变化一次!

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 {bind,Component,View,bootstrap} from "angular2/angular2";

        @Component({selector:"ez-app"})
        @View({
			template:`<h1 [style.color]="color">Hello,Angular2</h1>`
		})
        class EzApp{
        	constructor(){
            	this.color = "red";
            }
        }
                
        bootstrap(EzApp);

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

 

 

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