Angular2入门——(2)模板语法

最简单的模板

组件的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的实例。

长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你探索前端的奥秘。

​