Angular2入门——(4)为模板应用样式
来源:互联网 发布:java开源聊天机器人 编辑:程序博客网 时间:2024/05/29 16:46
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属性来引入外部样式:
@View({
styleUrls:["ez-greeting.css"]
})
ShadowDom - 封装私有样式
Angular2采用ShadowDom作为组件的渲染基础,这意味着组件被渲染到独立的 Shadow Tree上,这很好,可以实现DOM对象和样式的良好封装:
但问题是,除了Chrome之外的大多数的浏览器目前还不支持ShadowDom,因此,Angular2 提供了三种将模板渲染到DOM的策略。
以下面的模板为例,我们看三种策略下的渲染结果差异:
@View{
template:"<h1>hello</h1>",
styles:["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(doc.head);
},[DOCUMENT_TOKEN])
上面的表达式用来提交给Angular2的注入器/DI,可以理解为:如果注入器需要实例化一个ShadowDomStrategy 实例,应当以DOCUMENT_TOKEN为参数,调用一个匿名的工厂函数,而这个工厂函数将返回一个 NativeShadowDomStrategy类的实例。
ES6支持lambda表达式,因此我们可以写的简单一些:
bind(ShadowDomStrategy).toFactory(doc => new NativeShadowDomStrategy(doc.head),[DOCUMENT_TOKEN])
补丁包
在Angular2的alpha.28版本的官方发行包中,没有包含默认ShadowDom策略之外的另两种策略实现模块,因此 我们单独打了一个包render.dev.js。
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。
- Angular2入门——(4)为模板应用样式
- Angular2入门——(2)模板语法
- Angular2入门——(3)模板的逻辑控制
- Angular2入门——(1)快速上手
- angular2 component css设置样式为全局样式
- 《Angular2入门系列基础》——angular2组件入门(一)
- Angular2文档学习的知识点摘要——模板语法
- 《Angular2入门系列实践》——实现页面动画效果
- 《Angular2入门系列基础》——pipe管道数据类型
- 《Angular2入门系列基础》——常见angular-cli命令
- 《angular2入门系列实践》——表单验证详解
- 《angular2入门系列基础》——路由Route
- 《Angular2入门系列基础》——ActivatedRoute路由
- css样式入门(建立样式模板)
- 【Angular2】Angular2——Hello World!
- angular2——发布angular2模块,服务
- smarty模板应用入门
- 为xml文件应用样式
- 进程通信(信号量)
- 进程通信(共享内存)
- 线程的创建、终止、等待
- RxJava操作符(02-创建操作)
- 分离线程
- Angular2入门——(4)为模板应用样式
- 线程同步
- 死锁问题
- 生产者消费者模型
- 一组数中,有两个数字各出现了一次,其他数字都是成对出现的,请找出这两个数。
- 读写锁
- 信号量 (线程互斥)
- 输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树。
- 两个栈实现一个队。