详解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 相关文章推荐
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
iview实现图片上传功能
Jun 29 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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新手上路(八)
2006/10/09 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
Yii框架form表单用法实例
2014/12/04 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
js面向对象的写法
2016/02/19 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
用原生js做单页应用
2017/01/17 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
python opencv实现图像边缘检测
2019/04/29 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python 三元运算符使用解析
2019/09/16 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
宣传口号大全
2014/06/16 职场文书
小学生通知书评语
2014/12/31 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
JS函数式编程实现XDM一
2022/06/16 Javascript