为了账号安全,请及时绑定邮箱和手机立即绑定

Angular1升级到Angular2之组件样式封装

标签:
AngularJS

背景

angular1升级Angular8需要了解的改变,请移步传送门
angular8核心思想:模块化,各组件维护自己的样式。

样式升级

angular1代码

  //之前代码scss, 图便利,常写在父组件的scss文件中,
.parent-container{
 .demo-container {
	 .items{
	    .....
	  }
 }
}	

angular1编译后

.parent-container{
 ....
}
.demo-container{
 ....
}
.demo-container .items{
 ....
}

angular8样式封装

  • ShadowDom : 组件的宿主元素附加一个 Shadow Dom,进行样式标识。支持度有限。
  • None: 不进行样式封装,暴露为全局样式。
  • Native:已废弃。
  • Emulated : 模式(默认值),css样式重命名,进而唯一标识。此时,针对js动态添加的元素,需要使用:host, ::ng-deep 保持层级关系。

angular8样式需要拆分

各组件维护自己的样式 选择器要对应html

.parent-container{
 ...
}
// child 组件scss文件定义
 .demo-container{
    .items{
		 ....
		}
 }

angular8动态元素样式不生效

.demo-container{
    .items{
		 ....
		}
 }
//采用默认Emulated模式,此时动态添加的元素,样式会不生效。编译后如下
[_nghost-kjf-c2]   .demo-container[_ngcontent-kjf-c2]{
 ....
}
[_nghost-kjf-c2]   .demo-container[_ngcontent-kjf-c2]   .items[_ngcontent-kjf-c2] {
	....
}

angular8动态元素样式生效

:host ::ng-deep .demo-container{
    .items{
		 ....
		}
 }
//添加:host ::ng-deep,不因为重命名影响层级关系,编译如下
[_nghost-svo-c2]     .demo-container{
  ....
}
[_nghost-svo-c2]     .demo-container .items {
	...
}

参考文献

本文作者:前端首席体验师(CheongHu)

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
22

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消