详解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
})

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

赞 (0)

相关推荐

  • AngularJS 视图详解及示例代码

    AngularJS 视图详解及示例代码

    AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置. 使用 定义一个div与ng-view在主模块中. <div ng-app="mainApp"> ... <div ng-view><

  • AngularJS入门教程之路由与多视图详解

    在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用. 请重置工作目录: git checkout -f step-7 注意到现在当你转到app/index.html时,你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来.当你点击一个手机链接时,一个手机详细信息列表也被显示了出来. 步骤6和步骤7之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 多视图,路由和布局模板 我们的应用正慢慢发展起来并且变得逐

  • angular4强制刷新视图的方法

    使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor(private zone: NgZone) { this.zone.run(() => { // 要更新视图的代码 }) } 以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大

  • Angular中实现树形结构视图实例代码

    Angular中实现树形结构视图实例代码

    近两年当中使用Angular开发过很多项目,其中也涉及到一些树形结构视图的显示,最近的在项目中封装了大量的组件,一些组件也有树形结构的展示,所以写出来总结一下. 相信大家都知道,树结构最典型的例子就是目录结构了吧,一个目录可以包含很多子目录,子目录又可以包含若干个子孙目录,那咱们今天就以目录结构为例来说明一下Angular中树结构的实现. 首先,我们希望封装一个组件,用于显示整个目录的树形机构,代码如下: <!DOCTYPE html> <html ng-app="treeDe

  • AngularJS入门教程之多视图切换用法示例

    AngularJS入门教程之多视图切换用法示例

    本文实例讲述了AngularJS多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>

  • AngularJS实现使用路由切换视图的方法

    本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml

  • angularJS实现不同视图同步刷新详解

    前言 作为angularJS框架MVC中M和V的桥梁,controller在整个angularJS的web应用中有着举足轻重的作用. 通常我们可以使用单例service的方式在不同的controller里面共享数据.比如在controller1中通过点击事件修改了service里面的值,controller2中再通过点击事件去获取service中被修改的值,即实现了一个值的传递.但是,如果在controller2中没有设置点击事件,如何实现当controller1中修改了值后,controlle

  • 模板视图和AngularJS之间冲突的解决方法

    本文实例讲述了模板视图和AngularJS之间冲突的解决方法.分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); 这里是对应的视图 <div ng-controller="loadData"> &l

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

    为什么我想要分享控制视图的封装模式呢?主要是我们angular的项目大多数都会去引入一个UI组件,但往往因为需求和关系我们会去修改UI组件的样式.这时,因为有些人不是很了解View encapsulation里面的属性,往往会直接在全局的style.js里面添加全局样式,等项目越来越大,就会出现一些不知名的bug和维护起来变得困难.如果你运用好视图的封装模式,会帮你解决好很多的问题. 一般来说组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分.通过在组件的元数据上设置视图

  • 详解Javascript实践中的命令模式

    详解Javascript实践中的命令模式

    定义 Encapsulate a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests,and support undoable operations." 「命令模式」将「请求」封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,同时支持可撤消的操作. 这里的「请求」的定义,并不是我们前端常说的「Ajax 请求

  • Promise面试题详解之控制并发

    Promise面试题详解之控制并发

    前言 在写这篇文章的时候我有点犹豫,因为先前写过一篇类似的,一道关于并发控制的面试题,只不过那篇文章只给出了一种解决方案,后来在网上又陆续找到两种解决方案,说来惭愧,研究问题总是浅尝辄止,所以今天便放在一起,借着这道面试题再重新梳理一下. 题目是这样的: 有 8 个图片资源的 url,已经存储在数组 urls 中(即urls = ['http://example.com/1.jpg', -., 'http://example.com/8.jpg']),而且已经有一个函数 function loa

  • 详解Java实践之抽象工厂模式

    详解Java实践之抽象工厂模式

    目录 一.前言 二.开发环境 三.抽象工厂模式介绍 四.案例场景模拟 4.1.场景模拟工程 4.2.场景简述 4.2.1.模拟单机服务 RedisUtils 4.2.2.模拟集群 EGM 4.2.3.模拟集群 IIR 4.3.单集群代码使用 4.3.1.定义使用接口 4.3.2.实现调用代码 五.代码实现 5.1.工程结构 5.2.ifelse实现需求 5.3.测试验证 六.抽象工厂模式重构代码 6.1.工程结构 6.2.代码实现 6.2.1.定义适配接口 6.2.2.实现集群使用服务 6.2.

  • 详解java调用存储过程并封装成map

    详解java调用存储过程并封装成map 本文代码中注释写的比较清楚不在单独说明,希望能帮助到大家, 实例代码: public List<Map<String , Object>> doCallProcedure(String procedureString,String[] parameters) throws PersistentDataOperationException { if (!isReady ()) { throw new PersistentDataOperatio

  • 详解Python 模拟实现生产者消费者模式的实例

    详解Python 模拟实现生产者消费者模式的实例 散仙使用python3.4模拟实现的一个生产者与消费者的例子,用到的知识有线程,队列,循环等,源码如下: Python代码 import queue import time import threading import random q=queue.Queue(5) #生产者 def pr(): name=threading.current_thread().getName() print(name+"线程启动......") for

  • JavaScript实现AOP详解(面向切面编程,装饰者模式)

    JavaScript实现AOP详解(面向切面编程,装饰者模式)

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过"动态织入"的方式掺入业务逻辑模块中. AOP能给我们带来什么好处? AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块. JavaScript实现AOP的思路? 通常,在 JavaScript 中实现 AOP,都是指把一个函数"动态织入&qu

  • 详解用Go语言实现工厂模式(Golang经典编程案例)

    详解用Go语言实现工厂模式(Golang经典编程案例)

    golang中的struct没有构造函数,一般可以使用工厂模式来解决这个问题.这个模式本身很简单而且使用在业务较简单的情况下.一般用于小项目或者具体产品很少扩展的情况(这样工厂类才不用经常更改). 代码结构如下:分别有main.go和student.go两个文件. 在student.go中: package model //定义一个结构体 type student struct{ Name string score float64 } //因为student结构体首字母是小写,因此是只能在mod

  • 详解PHP设计模式之依赖注入模式

    详解PHP设计模式之依赖注入模式

    目的 实现了松耦合的软件架构,可得到更好的测试,管理和扩展的代码 用法 DatabaseConfiguration 被注入 DatabaseConnection 并获取所需的 $config .如果没有依赖注入模式, 配置将直接创建 DatabaseConnection .这对测试和扩展来说很不好. 例子 Doctrine2 ORM 使用依赖注入. 例如,注入到 Connection 对象的配置. 对于测试而言, 可以轻松的创建可扩展的模拟数据并注入到 Connection 对象中. Symfo

  • 详解JavaScript面向对象实战之封装拖拽对象

    详解JavaScript面向对象实战之封装拖拽对象

    目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖

随机推荐