Angular2入门——(4)为模板应用样式

styles - 设置模板样式

组件既然处于UI层，就应当好看些，好看是构造良好用户体验的一部分。Angular2的 组件模板基于HTML，那么显然，我们需要通过样式表/CSS来调整组件的外观。

和模板类似，我们有两种方法为组件设置CSS样式：

1. 内联样式

可以使用组件View注解的styles属性来设置内联样式：

 
 

  
  
@View({
  
  
  styles:[`
  
  
    h1{background:#4dba6c;color:#fff}   
  
  
  `]
  
  
})
 
 

2. 外部样式

也可以把样式定义在单独的文件中：

 
 

  
  
/*ez-greeting.css*/
  
  
h1{background:#4dba6c;color:#fff}   
 
 

然后使用View注解的styleUrls属性来引入外部样式：

  styleUrls"ez-greeting.css"})

  
  


 
 

ShadowDom - 封装私有样式

Angular2采用ShadowDom作为组件的渲染基础，这意味着组件被渲染到独立的Shadow Tree上，这很好，可以实现DOM对象和样式的良好封装：

但问题是，除了Chrome之外的大多数的浏览器目前还不支持ShadowDom，因此，Angular2 提供了三种将模板渲染到DOM的策略。

以下面的模板为例，我们看三种策略下的渲染结果差异：

{

  
  
  template:"<h1>hello</h1>",
  
  
"h1{color:red}"}
 
 

全局仿真策略/EmulatedUnscopedShadowDomStrategy

采用这个策略时，Angular2将模板直接插入DOM树，并将模板的样式原封不动地插入head头部。这意味着 不同组件之间的样式可能冲突: 在右边的示例代码中，你可以清楚的看到，EzApp组件的h1样式污染了其他的 h1元素，所有的h1都变成红色了。

示例代码渲染后的DOM如下：

这个策略不需要浏览器原生支持ShadowDom，是当前版本（alpha.28）的默认策略。

作用域仿真策略/EmulatedScopedShadowDomStrategy

采用这个策略时，Angular2将模板直接插入DOM树，对模板的样式重新定义CSS选择符后 插入head头部。由于样式进行了重命名，所以不同组件之间的样式不会冲突。

示例代码在这个策略下的渲染结果是：

这个策略也不需要浏览器原生支持ShadowDom。

原生策略/NativeShadowDomStrategy

采用这个策略时，Angular2将在组件的宿主DOM对象上建立一个ShadowDom树，这颗树与主DOM树是隔离 的，所以，这是实现Web组件的理想方案：

如果浏览器原生支持ShadowDom，那么应当使用这个策略。

设置ShadowDom策略

在Angular2中，ShadowDom的三种策略对应于三个类，这三个类继承自ShadowDomStrategy：

Angular2的内核引用的是父类ShadowDomStrategy，我们只需要从三个继承类中选择 一个与之绑定就可以实现不同策略的选择。下面的示例意味着选择NativeShadowDomStrategy：

 
 

  
  
bind(ShadowDomStrategy).toFactory(function(doc){
  
  
    return new NativeShadowDomStrategy.head);
  
  
  },[DOCUMENT_TOKEN])
 
 

上面的表达式用来提交给Angular2的注入器/DI，可以理解为：如果注入器需要实例化一个ShadowDomStrategy实例，应当以DOCUMENT_TOKEN为参数，调用一个匿名的工厂函数，而这个工厂函数将返回一个NativeShadowDomStrategy类的实例。

ES6支持lambda表达式，因此我们可以写的简单一些：

doc =>),sans-serif; font-size:16px; line-height:25.6px; word-wrap:break-word!important"> 补丁包
 
 在Angular2的alpha.28版本的官方发行包中，没有包含默认ShadowDom策略之外的另两种策略实现模块，因此 我们单独打了一个包render.dev.js。
 
 
 
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你探索前端的奥秘。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!