一般来说是作用域的问题,首先你应该先看标签内是否有angular2内置生成的自定义属性比如:

在我们的@Component中,这三个是基本的设置。

页面上的标签会生成带有 _nghost-c1 和  _ngcontent-c1  如下图:

对应在memumanager组件上的样式和@import进来的样式都会带上 [_ngcontent-c1] 这个作用域,如下图:

因而,如果你用Js新创建的DOM并插入到节点的时候,可能你新创建的DOM并没有带这个作用域,对应你写得样式就会不起作用;

或者这个组件的样式是common的css,当被其他组件引入的时候,因为作用域的原因,也会导致样式的失效。

而当我们设置了 encapsulation: ViewEncapsulation.None

页面就会把   _nghost-c1 和  _ngcontent-c1 这两个作用域去掉,对应Component打包出来的css也没有这个作用域。

angular2+ 组件中用@import进来的css不起作用的更多相关文章

  1. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  2. 3.认识Angular2组件之1

    简述:组件(component)是构成Angular应用的基础和核心.可以这样说,组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作. 1. 组件化标准:W3C为了统一组件化的标准方式 ...

  3. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  4. vue组件如何引入外部.js/.css/.scss文件

    可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...

  5. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  6. @import url(../image/css)的用法

    1.@import url(../image/css);可以加载css文件2.@import url(../image/css);可以写在html里加载css文件,也可以写在css文件里加载css文件 ...

  7. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  8. webpack 打包成功,但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  9. css 描述css reset的作用和用途。

    描述css reset的作用和用途. 作用 : 因为浏览器的品种很多,每个浏览器的默认样式也是不同的.通过重新定义标签样式.“覆盖”浏览器的CSS默认属性. 有最简单的*{margin:0 ;  pa ...

随机推荐

  1. 「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)

    目录(技术文) 多关于索引,分为以下几点来讲解: 一.索引的概述(什么是索引,索引的优缺点) 二.索引的基本使用(创建索引) 三.索引的基本原理(面试重点) 四.索引的数据结构(B树,hash) 五. ...

  2. solr集群的理解和配置(待更新)

    solr部署在tomcat下,solr集群依赖tomcat集群和zookeeper集群: zookeeper:1.对象注册和发放中心,实现异步调用. 2.配置中心.(solrConfig.xml,sc ...

  3. EditText禁用系统键盘,光标可以继续使用

    在项目中有时候需要使用到自己的键盘,那这个时候就不希望系统键盘在弹出,而且光标还要继续显示,其实一个方法就可以简单实现 /** * 禁止Edittext弹出软件盘,光标依然正常显示. */ publi ...

  4. ASP.NET Core MVC请求超时设置解决方案

    设置请求超时解决方案 当进行数据导入时,若导入数据比较大时此时在ASP.NET Core MVC会出现502 bad gateway请求超时情况(目前对于版本1.1有效,2.0未知),此时我们需要在项 ...

  5. iOS开发--数据库管理CoreData的使用

    CoreData是iOS5后,苹果提供的原生的用于对象化管理数据并且持久化的框架.CoreData本质上是将底层数据库封装成对象进行管理.但数据库实际上只是CoreData的一个功能,并不是全部功能. ...

  6. python写入文本报错TypeError: expected a string or other character buffer object

    今天用python写入文本, file_object2 = open('result.txt', 'w') file_object2.write(bookid_list) file_object2.c ...

  7. 栈详解及java实现

    导读 栈和队列是有操作限制的线性表. 目录 1.栈的概念.特点.存储结构. 2.栈的java实现及运用. 概念 栈是一种只允许在一端进行插入或删除的线性表. 1.栈的操作端通常被称为栈顶,另一端被称为 ...

  8. CSS3 使用选择器在页面插入内容

    使用选择器来插入文字 h2:before{ content:'COLUMN'; color:white: background-color:orange: padding:1px 5px; } 注意点 ...

  9. Java的演化-Java8实战笔记

    一个语言要想一直有活力,它也需要跟随着时代的变化去进步,Java作为一个古老的语言,它其实有太多的历史包袱,在改变的过程中需要考虑很多,但是它也在慢慢的演变,巩固自己的城墙,不让自己被遗忘在历史中(不 ...

  10. windows的ReactNative挖坑一分钟爬坑一小时

    其实开发并不需要Android Studio来开发,因为命令行都是要自己手打的,所以就开始了我的挖坑爬坑之旅 首先安装React Native要用到的git.nodejs等等这里不讲了,主要讲在手机上 ...