脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular2 控制视图封装

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

 更新时间：2018年12月27日 11:32:33   作者：Twait  
这篇文章主要介绍了详解angular2 控制视图的封装模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

为什么我想要分享控制视图的封装模式呢？主要是我们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
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用AngularJS处理单选框和复选框的简单方法

    使用AngularJS处理单选框和复选框的简单方法

    这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下
    2015-06-06
  • 实例详解AngularJS实现无限级联动菜单

    实例详解AngularJS实现无限级联动菜单

    这篇文章主要介绍了实例详解AngularJS实现无限级联动菜单的相关资料,需要的朋友可以参考下
    2016-01-01
  • AngularJS通过$sce输出html的方法

    AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候，发现用AngularJs输出html的时候，浏览器并不解析这些html标签，这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。
    2016-09-09
  • 使用Angular CDK实现一个Service弹出Toast组件功能

    使用Angular CDK实现一个Service弹出Toast组件功能

    本文主要写用cdk实现一个简单的Toast组件，使用的是cdk中的overlay模块，需要手动安装环境，具体安装方法及相关实现代码跟随小编一起看看吧
    2021-07-07
  • Angular.js中angular-ui-router的简单实践

    Angular.js中angular-ui-router的简单实践

    本篇文章主要介绍了Angular.js中angular-ui-router的简单实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解Angular Karma测试的持续集成实践

    详解Angular Karma测试的持续集成实践

    这篇文章主要介绍了详解Angular Karma测试的持续集成实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • AngularJS入门教程之链接与图片模板详解

    AngularJS入门教程之链接与图片模板详解

    本文主要介绍 AngularJS 链接与图片模板的知识，这里整理了相关资料及示例代码，有兴趣的小伙伴可以参考下
    2016-08-08
  • Angularjs过滤器使用详解

    Angularjs过滤器使用详解

    AngularJS提供了过滤器来对输入输出数据格式化。这篇文章主要介绍了Angularjs过滤器使用的相关资料,需要的朋友可以参考下
    2016-05-05
  • angularJS开发注意事项

    angularJS开发注意事项

    本篇文章给大家分享了angularJS开发注意事项以及相关知识点，对此有兴趣的朋友参考学习下。
    2018-05-05
  • Angular中懒加载模块初始化技术实例解析

    Angular中懒加载模块初始化技术实例解析

    这篇文章主要为大家介绍了Angular中懒加载模块初始化技术实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10

最新评论