Angular2 控制视图的封装模式

keke 发布于2019-08-30 15:55 / 2160人阅读

摘要：如果你运用好视图的封装模式，会帮你解决好很多的问题。通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。

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 元素都被加上了一些额外的属性。

  Mister Fantastic
  
    Team
  

生成出的属性分为两种：
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
})

GPU云服务器云服务器工业控制云服务器模式 angular2 配置jsp视图的作用数据库中的视图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117145.html

Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
Angular 2 快速上手

摘要：为了简单起见，在本文中将会使用。已经实例化了并且将它的模板载入到了元素中。中的依赖注入发生在该类的构造函数中，因此我们将在构造函数中注入。国内 Angular2 资料比较少，这里看到一篇不错的入门文章就分享过来了 —— Angular 2 快速上手，这里面还有很多有关于 Angular2 的文章，感兴趣的朋友可以去看一看目前angular2已经来到了beta版，这意味着它已经做好了...

singerye 2019-08-19 17:38 评论0 收藏0
Angular 2.x+ 脏检查机制理解

摘要：策略减少检测次数当输入属性不变时，可以跳过整个变更检测子树。现在当执行更改检测时，它将从上到下进行。并且一旦更改检测运行结束，它将恢复整个树的状态。 Angular 2.x+ 脏检查机制理解目前几种主流的前端框架都已经实现双向绑定特性，但实现的方法各有不同：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持 + 发布者-订阅者模式（vue.j...

W4n9Hu1 2019-08-20 16:51 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
Angular2， NativeScript 和 React Native比较[翻译]

摘要：当开始使用来提供真正的跨平台应用时，他发现对的紧耦合的依赖性在用开发应用创建映射时呈现的问题。的重点放在高性能的渲染和执行上，你可以很轻松的创建高性能的跨平台应用，这些应用可以在相同的代码库上运行并且随意使用特点平台的组件。 showImg(https://segmentfault.com/img/bVJi8d?w=980&h=400); 在开发阶段，跨平台开发App面临一个很重要的决...

cooxer 2019-08-20 14:19 评论0 收藏0