组件样式：

  • :host 选择器

使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）

这是我们能以宿主元素为目标的唯一方式。除此之外，我们将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分

要把宿主样式作为条件，就要像函数一样把其它选择器放在:host后面的括号中

在下一个例子中，我们又一次把宿主元素作为目标，但是只有当它同时带有active CSS 类的时候才会生效

:host(.active) {

　　border-width: 3px;

}

  • :host-context 选择器

有时候，基于某些来自组件视图外部的条件应用样式是很有用的。 例如，在文档的<body>元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，而我们应当基于它来决定组件的样式

可以使用:host-context()伪类选择器。它也以类似:host()形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止

例子中，只有当某个祖先元素有 CSS 类theme-light时，我们才会把background-color样式应用到组件内部的所有<h2>元素中

:host-context(.theme-light) h2 {

　　background-color: #eef;

}

  • 模板中的link标签

这个 link 标签的href指向的 URL 也是相对于应用的根目录的，而不是组件文件

@Component({
  selector: 'app-hero-team',
  template: `
    <link rel="stylesheet" href="assets/hero-team.component.css">
    <h3>Team</h3>
    <ul>
      <li *ngFor="let member of hero.team">
        {{member}}
      </li>
    </ul>`
})

　　

  • 元数据中指定样式表的URL

通过在组件的@Component装饰器中添加styleUrls属性，我们可以从外部CSS文件中加载样式

@Component({
  selector: 'app-hero-details',
  template: `
    <h2>{{hero.name}}</h2>
    <app-hero-team [hero]=hero></app-hero-team>
    <ng-content></ng-content>
  `,
  styleUrls: ['./hero-details.component.css']
})
export class HeroDetailsComponent {
}

  • CSS @imports 语法

我们还可以利用标准的 CSS @import规则来把其它 CSS 文件导入到我们的 CSS 文件中,URL 是相对于我们执行导入操作的 CSS 文件的:

@import 'hero-details-box.css';

控制视图的封装模式：原生 (Native)、仿真 (Emulated) 和无 (None)

组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分

在组件的元数据上设置视图封装模式，我们可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种：

  • Native模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的样式被包裹在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)

  • Emulated模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1 。(译注：只进不出，全局样式能进来，组件样式出不去)

  • None意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)

  • 通过组件元数据中的encapsulation属性来设置组件封装模式
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'enroll-member',
  templateUrl: './enroll-member.component.html',
  styleUrls: ['./enroll-member.component.less']
})

　　

angular2-组件样式的更多相关文章

  1. Angular2 组件

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

  2. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

  3. Vue+element-ui 重置组件样式的写法

    两种方式实现element-ui组件的样式 方案1:重置的公共组件样式的写法如下 然后在main.js中引入 import '@/assets/css/element.css'   方案2:每个.vu ...

  4. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  5. Mockplus组件样式库一键解决风格复用

    在Mockplus3.3版本中,新增了组件样式库,可以快速复用组件风格,同时可以将组件风格保存到库中. 官网地址:https://www.mockplus.cn 1. 保存样式 选中组件,设置好该组件 ...

  6. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  7. 修改elementUI组件样式无效的问题研究

    问题背景:el-tabs的选项卡默认字体是14px,大了,想改成12px,结果在style里面加样式总是不生效. 解决:样式放到app.vue里面,样式就生效了 .panel-content .el- ...

  8. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  9. vue+Elment-UI，修改element组件样式

    在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...

  10. 解决angular+element原有组件样式不能覆盖element自带样式问题

    在对应的组件中写入 ::ng-deep   +     想要改变的element组件样式名即可

随机推荐

  1. Mysql INNER JOIN

    1.MySQL INNER JOIN子句将一个表中的行与其他表中的行进行匹配,并允许从两个表中查询包含列的行记录. 2.INNER JOIN子句是SELECT语句的可选部分,它出现在FROM子句之后. ...

  2. P1452 Beauty Contest 旋转卡壳

    \(\color{#0066ff}{题目描述}\) 贝茜在牛的选美比赛中赢得了冠军"牛世界小姐".因此,贝西会参观N(2 < = N < = 50000)个农场来传播善 ...

  3. redhat7查看系统版本 修改主机名

    在CentOS或RHEL中,有三种定义的主机名:静态的(static),瞬态的(transient),以及灵活的(pretty).“静态”主机名也称为内核主机名,是系统在启动时从 /etc/hostn ...

  4. 【模板】文艺平衡树（Splay） 区间翻转 BZOJ 3223

    您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 N,M<= ...

  5. [JavaScript]如何实现一个JS脚本能在browser和NodeJs里都是用

    下面是一个Common的Solution 'use strict'; // Universal Module Definition (UMD) to support AMD, CommonJS/Nod ...

  6. git commit 操作

    查看提交历史 然后在此项目中运行 git log,应该会看到下面的输出:   合并commit 信息 我们需要将 2dfbc7e8 和 c4e858b5 合并成一个 commit,那么我们输入如下命令 ...

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_8.1实例构造器和类A

    public class SomeType { } //等价于 public class SomeType { public SomeType():base(){} } [解释]如果定义的类没有显示定 ...

  8. hdu Minimum Inversion Number（逆序数的小知识与线段树）

    飞! 题解 首先,求逆序数对的思路: 1.得到整个数列后,从前往后扫,统计比a[i]小的,在a[i]后面的有多少个 这样做的话,应该是只有n2的暴力作法,没想到更好的方法 2.统计a[i]前面的,且比 ...

  9. django权限二(多级菜单的设计以及展示)

    多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...

  10. thinkphp引入模板view

    3.1 模板放在哪儿? 放在模块的view目录下并且每个控制器的模板,要在与控制器同名的目录下. 以 index.php/Home/User/add则对应的模板在 /Home/view/User/ad ...