摘要：
属性声明 - 暴露成员变量属性是组件暴露给外部世界的调用接口，调用者通过设置不同的属性值来定制组件的行为与外观：在Angular2中为组件增加属性接口非常简单，只需要在Component注解的properties属性中声明组件的成员变量就可以了：1 //EzCard 2 @Component({3 ... 阅读全文
摘要：
设置ShadowDom策略在Angular2中，ShadowDom的三种策略对应于三个类，这三个类继承自ShadowDomStrategy：Angular2的内核引用的是父类ShadowDomStrategy，我们只需要从三个继承类中选择 一个与之绑定就可以实现不同策略的选择。下面的示例意味着选择N... 阅读全文
摘要：
ShadowDom - 封装私有样式Angular2采用ShadowDom作为组件的渲染基础，这意味着组件被渲染到独立的Shadow Tree上，这很好，可以实现DOM对象和样式的良好封装：但问题是，除了Chrome之外的大多数的浏览器目前还不支持ShadowDom，因此，Angular2 提供了三... 阅读全文
摘要：
styles - 设置模板样式组件既然处于UI层，就应当好看些，好看是构造良好用户体验的一部分。Angular2的 组件模板基于HTML，那么显然，我们需要通过样式表/CSS来调整组件的外观。和模板类似，我们有两种方法为组件设置CSS样式：1. 内联样式可以使用组件View注解的styles属性来设... 阅读全文
摘要：
NgFor- 循环逻辑如果希望利用一组可遍历的数据动态构造模板，那么应当使用NgFor指令。 例如示例中的EzStar组件，用来展示演员的作品列表：迭代NgFor指令应用在template元素上，对ngForOf属性指定的数据集中的每一项 实例化一个template的内容：1 2 -----... 阅读全文
摘要：
使用分支逻辑如果组件的模板需要根据某个表达式的不同取值展示不同的片段，可以使用NgSwitch系列指令来动态切分模板。比如右边示例中的广告组件EzPromotion，需要根据来访者性别的不同推送不同的广告：NgSwitch包含一组指令，用来构造包含多分支的模板：NgSwitchNgSwitch指令可... 阅读全文
摘要：
使用条件逻辑有时我们需要模板的一部分内容在满足一定条件时才显示，比如右边示例中的EzReader组件， 对于试用用户，它将在正文之上额外显示一个广告：这是指令NgIf发挥作用的场景，它评估属性ngIf的值是否为真，来决定是否渲染template元素的内容：1 @View({2 templat... 阅读全文
摘要：
#var - 局部变量有时模板中的不同元素间可能需要互相调用，Angular2提供一种简单的语法将元素 映射为局部变量：添加一个以#或var-开始的属性，后续的部分表示变量名， 这个变量对应元素的实例。在下面的代码示例中，我们为元素h1定义了一个局部变量v_h1，这个变量指向 该元素对应的DOM对象... 阅读全文
摘要：
(event) - 监听事件在模板中为元素添加事件监听很简单，使用一对小括号包裹事件名称，并绑定 到表达式即可：上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。另一种等效的书写方法是在事件名称前加on-前缀：1 @View({template : `HELLO`})例如... 阅读全文
摘要：
[property] - 绑定属性在模板中，也可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式， 当表达式的值变化时，对应的DOM对象将自动得到更新：等价的，你也可以使用bind-前缀进行属性绑定：1 @View({template:``})很容易理解，通过属性，应用相关的数据... 阅读全文