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引用外部模板：

  templateUrl "ezcomp-tpl.html"

  
  
})
 
 

directives - 使用组件

在Angular2中，一个组件的模板内除了可以使用标准的HTML元素，也可以使用自定义的组件！

这是相当重要的特性，意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件。这样， 你可以建立自己的领域建模语言了，这使得渲染模板和视图模型的对齐更加容易，也使得模板的语义性 更强：

声明要在模板中使用的组件

不过，在使用自定义组件之前，必需在组件的ViewAnnotation中通过directives属性声明这个组件：

  directives [EzComp],

  
  
"<ez-comp></ez-comp>"
  
  
 你应该注意到了，directives属性的值是一个数组，这意味着，你需要在这里声明所有你需要在模板 中使用的自定义组件。
 
 
 
 
 {{model}} - 文本插值
 
 在模板中使用可以{{表达式}}的方式绑定组件模型中的表达式，当表达式变化时， Angular2将自动更新对应的DOM对象：
 
 上图的示例中，模板声明了h1的内容将绑定到组件实例的title变量。Angular2 框架将实时检测title的变化，并在其变化时自动更新DOM树中h1的内容。
 
 
 
 
 
 
 
 [property] - 绑定属性
 
 在模板中，也可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式， 当表达式的值变化时，对应的DOM对象将自动得到更新：
 
 等价的，你也可以使用bind-前缀进行属性绑定：
 
({template:`<h1 bind-text-content="title"></h1>` 很容易理解，通过属性，应用相关的数据流入组件，并影响组件的外观与行为。
 
 需要注意的是，属性的值总是被当做调用者模型中的表达式进行绑定，当表达式变化时，被 调用的组件自动得到更新。如果希望将属性绑定到一个常量字符串，别忘了给字符串加引号，或者， 去掉中括号：
 
//错误，Angular2将找不到表达式 Hello,Angular2

  
  
`<h1 [text-content]="Hello,Angular2"></h1>`})
  
  
//正确，Angular2识别出常量字符串表达式 'Hello,Angular2'
  
  
`<h1 [text-content]="'Hello,Angular2'"></h1>`//正确，Angular2识别出常量字符串作为属性textContent的值
  
  
`<h1 text-content="Hello,161)">})
 
 

(event) - 监听事件

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

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

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

`<h1 on-click="onClick()">HELLO</h1>` 
 
 
 #var - 局部变量
 
 有时模板中的不同元素间可能需要互相调用，Angular2提供一种简单的语法将元素 映射为局部变量：添加一个以#或var-开始的属性，后续的部分表示变量名， 这个变量对应元素的实例。
 
 在下面的代码示例中，我们为元素h1定义了一个局部变量v_h1，这个变量指向 该元素对应的DOM对象，你可以在模板中的其他地方调用其方法和属性：
 
`

  
  
    <h1 #v_h1>hello</h1>
  
  
    <button (click) = "#v_h1.textContent = 'HELLO'">test</button>
  
  
  `
  
  
 如果在一个组件元素上定义局部变量，那么其对应的对象为组件的实例：
 
  directives:[EzCalc"<ez-calc #c></ez-calc>"

  
  
 在上面的示例中，模板内的局部变量c指向EzCalc的实例。
 
 
 
 
 
 
 好东西记得分享哦！
 
 
 
 
 
 
 长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”
 
 
 
 
 
 ?
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!