最简单的模板
组件的View注解用来声明组件的外观,它最重要的属性就是template - 模板。 Angular2的模板是兼容HTML语法的,这意味着你可以使用任何标准的HTML标签编写 组件模板。
所以,在最简单的情况下,一个Angular2组件的模板由标准的HTML元素构成,看起来就是 一段HTML码流。Angular2将原封不同地渲染这段模板:
有两种方法为组件指定渲染模板:
1. 内联模板
可以使用组件的View注解中的template属性直接指定内联模板:
-
@View({
-
template : `<h1>hello</h1>
-
<div>...</div>`
-
})
在ES6中,使用一对`符号就可以定义多行字符串,这使得编写内联的模板轻松多了。
2. 外部模板
也可以将模板写入一个单独的文件:
-
<!--ezcomp-tpl.html-->
-
<h1>hello</h1>
-
<div>...</div>
然后在定义组件时,使用templateUrl引用外部模板:
-
@View({
-
templateUrl : "ezcomp-tpl.html"
-
})
directives - 使用组件
在Angular2中,一个组件的模板内除了可以使用标准的HTML元素,也可以使用自定义的组件!
这是相当重要的特性,意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件。这样, 你可以建立自己的领域建模语言了,这使得渲染模板和视图模型的对齐更加容易,也使得模板的语义性 更强:
声明要在模板中使用的组件
不过,在使用自定义组件之前,必需在组件的ViewAnnotation中通过directives属性声明这个组件:
-
@View({
-
directives : [EzComp],
-
template : "<ez-comp></ez-comp>"
-
})
你应该注意到了,directives属性的值是一个数组,这意味着,你需要在这里声明所有你需要在模板 中使用的自定义组件。
{{model}} - 文本插值
在模板中使用可以{{表达式}}的方式绑定组件模型中的表达式,当表达式变化时, Angular2将自动更新对应的DOM对象:
上图的示例中,模板声明了h1的内容将绑定到组件实例的title变量。Angular2 框架将实时检测title的变化,并在其变化时自动更新DOM树中h1的内容。
[property] - 绑定属性
在模板中,也可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式, 当表达式的值变化时,对应的DOM对象将自动得到更新:
等价的,你也可以使用bind-前缀进行属性绑定:
-
@View({template:`<h1 bind-text-content="title"></h1>`})
很容易理解,通过属性,应用相关的数据流入组件,并影响组件的外观与行为。
需要注意的是,属性的值总是被当做调用者模型中的表达式进行绑定,当表达式变化时,被 调用的组件自动得到更新。如果希望将属性绑定到一个常量字符串,别忘了给字符串加引号,或者, 去掉中括号:
-
//错误,Angular2将找不到表达式 Hello,Angular2
-
@View({template:`<h1 [text-content]="Hello,Angular2"></h1>`})
-
//正确,Angular2识别出常量字符串表达式 'Hello,Angular2'
-
@View({template:`<h1 [text-content]="'Hello,Angular2'"></h1>`})
-
//正确,Angular2识别出常量字符串作为属性textContent的值
-
@View({template:`<h1 text-content="Hello,Angular2"></h1>`})
(event) - 监听事件
在模板中为元素添加事件监听很简单,使用一对小括号包裹事件名称,并绑定 到表达式即可:
上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。
另一种等效的书写方法是在事件名称前加on-前缀:
-
@View({template : `<h1 on-click="onClick()">HELLO</h1>`})
#var - 局部变量
有时模板中的不同元素间可能需要互相调用,Angular2提供一种简单的语法将元素 映射为局部变量:添加一个以#或var-开始的属性,后续的部分表示变量名, 这个变量对应元素的实例。
在下面的代码示例中,我们为元素h1定义了一个局部变量v_h1,这个变量指向 该元素对应的DOM对象,你可以在模板中的其他地方调用其方法和属性:
-
@View({
-
template : `
-
<h1 #v_h1>hello</h1>
-
<button (click) = "#v_h1.textContent = 'HELLO'">test</button>
-
`
-
})
如果在一个组件元素上定义局部变量,那么其对应的对象为组件的实例:
-
@View({
-
directives:[EzCalc],
-
template : "<ez-calc #c></ez-calc>"
-
})
在上面的示例中,模板内的局部变量c指向EzCalc的实例。