详解angular2 控制视图的封装模式


Posted in Javascript onDecember 27, 2018

为什么我想要分享控制视图的封装模式呢?主要是我们angular的项目大多数都会去引入一个UI组件,但往往因为需求和关系我们会去修改UI组件的样式。这时,因为有些人不是很了解View encapsulation里面的属性,往往会直接在全局的style.js里面添加全局样式,等项目越来越大,就会出现一些不知名的bug和维护起来变得困难。如果你运用好视图的封装模式,会帮你解决好很多的问题。

一般来说组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分。通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式。Angular2有三种样式封装模式:

  • ViewEncapsulation.Native - 使用原生的Shadow Dom。
  • ViewEncapsulation.Emulated - angular2的默认值,通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为,在标签上增加标识,来固定样式的作用域,以达到把 CSS 样式局限在组件视图中的目的。
  • ViewEncapsulation.None - 没有Shadow Dom,样式没有封装, Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说,这跟把组件的样式直接放进 HTML 是一样的。

在 ViewEncapsulation.Emulated下 的 Angular 应用的 DOM 树中,每个 DOM 元素都被加上了一些额外的属性。

<hero-details _nghost-pmm-5>
 <h2 _ngcontent-pmm-5>Mister Fantastic</h2>
 <hero-team _ngcontent-pmm-5 _nghost-pmm-6>
  <h3 _ngcontent-pmm-6>Team</h3>
 </hero-team>
</hero-detail>

生成出的属性分为两种:

1、一个元素在原生封装方式下可能是 Shadow DOM 的宿主,在这里被自动添加上一个 _nghost 属性。 这是组件宿主元素的典型情况。

2、组件视图中的每一个元素,都有一个 _ngcontent 属性,它会标记出该元素是哪个宿主的模拟 Shadow DOM。
用法如下:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-factor_analysi',
  templateUrl: './factor_analysis.component.html',
  styleUrls: ['./factor_analysis.component.scss'],
  providers: [factor_analysis_api],
  encapsulation: ViewEncapsulation.None
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
JavaScript原型对象原理与应用分析
Dec 27 #Javascript
angular6 填坑之sdk的方法
Dec 27 #Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 #Javascript
React降级配置及Ant Design配置详解
Dec 27 #Javascript
详解Ant Design of React的安装和使用方法
Dec 27 #Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
You might like
php类自动加载器实现方法
2015/07/28 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
使用django自带的user做外键的方法
2020/11/30 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
公司员工检讨书
2014/02/08 职场文书
留守儿童工作方案
2014/06/02 职场文书
党员自我剖析材料
2014/08/31 职场文书
教师党员个人整改措施
2014/10/27 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
工作表现证明
2015/06/15 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL