文档章节

angular2 学习二 [property] - 绑定属性

王福林
 王福林
发布于 2016/12/01 11:33
字数 378
阅读 85
收藏 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>

 

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
08/31
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44

没有更多内容

加载失败,请刷新页面

加载更多

阿里云建站

阿里云自营建站 没想到阿里云已经切入这块市场了。可以用拖动的方式来建站的模式,真的还是6.

miaojiangmin
24分钟前
2
0
linux系统top命令:virt,res,shr详解

VIRT:virtual memory usage 虚拟内存 1、进程“需要的”虚拟内存大小,包括进程使用的库、代码、数据等 2、假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而不是实际的使用...

刘祖鹏
30分钟前
2
0
day154-2018-11-21-英语流利阅读-待学习

快手网红发明家:百万粉丝 vs 零销量 雪梨 2018-11-21 1.今日导读 “我做了一个‘雷神锤’的斜挎包,你看这里可以打开,里面可以装手机、卫生纸、钱包,觉得轻的话可以放一些砖头。咱们把它背...

飞鱼说编程
37分钟前
10
0
图灵奖得主华人高徒发布AI芯片!64位RISC-V、高度可编程,低功耗

作为RISC-V架构下的旗手玩家,睿思芯科自然希望通过产品展现出RISC-V可编程架构的巨大潜力。 https://mbd.baidu.com/newspage/data/landingshare?context=%7B%22nid%22:%22news_917924603675...

whoisliang
37分钟前
4
0
xcode 10 缺少 libstdc++6.0.9 解决方案

image.png 本方案基于xcode10正式版操作,其它版本请自行验证! 苹果在XCode10中移除了libstdc++(libstdc++.6、libstdc++6.0.9)库。 项目解决方法:删除libstdc++(libstdc++.6、libstdc++6....

壹峰
42分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部