Angular2怎么着修改父亲和儿子组件样式,Angular五

作者: 韦德国际1946国际网址  发布:2019-05-28

在Angular 5给组件本身的价签增添样式有两种办法:

Angular 二 (Now 5.0) 应用程序使用的是常规CSS样式,意思正是说CSS典型中的全数东西都足以直接在Angular应用程序中一贯运用。

图片 1

场馆:须求依照实际项目须求,修改引进的第二方组件的1部分样式

方式一:使用@Component的host属性

壹、怎么样行使组件样式?

在编写Angular二组件时,不光只是定义HTML模板,同期也急需选用CSS对HTML模板实行美化。最简便的是在组件元数据里定义 styles 属性,其是1个含CSS代码的字符串数组,举个例子:

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { color: red; }'],
  directives: [HeroAppMainComponent]
})

零件样式不相同于守旧和大局style(即 <style> 成分)两种办法。

首先,h1{} 它只限里当前 HeroAppComponent 组件有效,换言之,除组件外的别样任何 h1要素都不会受影响。

在组件模块化里,这种方法的CSS比古板CSS尤其有优势:

  1. 支撑CSS类名和选择器,且限当前组件上下文有意义。
  2. CSS类名和选择器不会与应用程序中任何类和甄选器相争辩。
  3. 应用程序的任哪个地点方不可能修改组件样式。
  4. 零件的CSS代码、组件类、HTML代码能够献身同等文件里。
  5. 时刻能够更动或删除组件的CSS代码,不必忧虑或然在别的地点1度被应用,只关怀组件本人。

实在以上说来讲去无非便是,组件样式的功效域限定特别窄,仅限组件本身行使而已。

  你用Angular吗?

目录

  1. 修改父组件的成分的体裁
  • 修改子组件的要素的样式
  • 基于父组件有无某些类,来修改组件自身的样式

@Component({
 selector : 'myComponent',
 host : {
  '[style.color]' : "'red'", 
  '[style.background-color]' : 'backgroundColor'
 }
})
class MyComponent {
 backgroundColor: string;
 constructor() {
  this.backgroundColor = 'blue';
 }
}

贰、特殊选拔器

只顾:本小节内需对影子DOM(Shadow DOM)有早晚的询问,具体见【引用】章节。

组件样式有多少个特其余选拔器是源于影子DOM(Shadow DOM)成效域的。

一.介绍

一、修改父组件的要素的样式

:host

:host伪类,那是在组件内部获得到其宿主成分的绝无仅有格局,会向上一向查找到根成分body

具体运用形式:

// 默认当前在一个组件中,该组件位于一个父组件中,且该组件引入了第三方子组件
// 以下内容为当前组件引用的css文件里的内容

// 第一种方式
// ele : 当前元素
ele:host h1 {
  font-size: 20px;
}
// 效果: 修改父组件的h1元素字体大小为20px。

// 第二种方式
ele:host(.active) h1 {
  font-size: 20px;
}
// 效果: 修改父组件类为active元素下的h1元素的字体大小。

在host配置里增多属性,等同于标签上绑定属性的用法同样。

Angular2怎么着修改父亲和儿子组件样式,Angular五给组件自身的价签增多样式class的艺术。1、宿主成分(:host)

使用 :host 伪类选择器应用到零部件的宿主成分里。换言之,:host 的使用只对指标成分有效。

:host {
  display: block;
  border: 1px solid black;
}

这是唯1一种对目的宿主成分设置样式的法子,组件内的别的选拔器是无力回天运用它,因为它不是组件本人模板的一部分。并且是在父组件的模版中有效。当然除外,大家还足以本着个其他宿主成分设置样式,譬喻以下只针对含有 .active 有效:

:host(.active) {
  border-width: 3px;
}

  怎么着只退换最简便易行的css代码,彰显完全不均等的视图效果。

2、 修改子组件的因素的体裁

/deep/>>>

/deep/ 和 >>> 是2个乐趣三种写法,都以操作子组件的要素的。

现实选择方法:

ele /deep/ h1 {
  font-size : 16px;
}
// 效果:/deep/ 最好是写在一个元素后面, 不然编辑器lint会报红, 这里是查找子组件的h1元素,并修改它的字体大小

等同于:
ele >>> h1 {
  font-size : 16px;
}

设置style:

2、宿主祖先成分(:host-context)

不时候供给通过外部标准来更换宿主成分的体制,举个例子,恐怕必要依据 <body> 成分设置的CSS主题类,然后再其基础做对我们组件实行修改。用法和 :host() 类似,使用 :host-context() 伪类,括号里面能够钦命根接纳器。譬如下边示例是针对带 theme-light 类下全体 h2 成分有效。

:host-context(.theme-light) h2 {
  background-color: #eef;
}

第贰种:最主旨的装置:

三、 依赖父组件有无有些类,来修改组件自己的样式

:host-context

:host-context,和:host类似,都以赢得宿主成分,尽管都以搜索宿主成分,但它们是有分别的, :host修改的要么宿主成分,:host-context修改却是当前组件,后者是本着父组件是不是享有有个别类名作出相应的样式改换响应。

实际使用办法:

ele:host-context(.active) h1 {
  border: 1px dotted #f00;
}
// 效果: 当宿主元素拥有active类时,才修改当前组件的h1元素的border属性样式。
  1. '[style.color]': "'red'":注意red值双引号里还也是有叁个单引号。
  2. '[style.background-color]':'backgroundColor':这里是援引了组件里的变量backgroudColor。

三、宿主成分样式的穿透(/deep/)

若果您询问影子DOM(Shadow DOM)的话,那么内部影子边界是个可怜关键的概念。前边我们已经领悟一些宿主成分与组件样式的作用域差异点。然则一时大家需求对组件样式和其子组件样式同不时候安装样式时,那就供给 /deep/ 来穿透影子边界了。

例如上面示例是本着富有 <h3> 成分有效,包蕴组件与子组件下全数 <h3> 成分都使得:

:host /deep/ h3 {
  font-style: italic;
}

/deep/ 选拔器还会有别的贰个外号 >>>

图片 2

这种办法的好处是足以在体制上利用组件的变量。

三、组件样式加载类型

有二种办法得以对组件增加样式:

  • HTML模板里
  • 由此元数据设置 stylestyleUrls 属性
  • 使用import加载CSS

  图1 代码

设置class:

1、元数据

地点示例都以透过元数据的 style 属性里定义样式。

@Component({
  selector: 'hero-app',
  template: `
    <h1>Tour of Heroes</h1>
    <hero-app-main [hero]=hero></hero-app-main>`,
  styles: ['h1 { font-weight: normal; }'],
  directives: [HeroAppMainComponent]
})

styles 属性是3个数组类型,每一个项最终都会独立生成一个 <style></style> 来包裹其样式内容,日常大家只要求五个项就可以。

图片 3

@Component({
 selector : 'myComponent',
 host : {
  '[class.myclass]' : 'showMyClass'
 }
})
class MyComponent {
 showMyClass = false;
 constructor() {
 }

 toggleMyClass() {
  this.showMyClass = !this.showMyClass;
 }
}

2、模板钦命义style标签

我们能够在模板里放置三个 <style> 标签,那和价值观未有啥样界别:

@Component({
  selector: 'hero-controls',
  template: `
    <style>
      button {
        background-color: white;
        border: 1px solid #777;
      }
    </style>
    <h3>Controls</h3>
    <button (click)="activate()">Activate</button>
  `
})

图2 界面运维作效果果图

措施二:在体制里应用:host选用器

三、元数据设置外部体制

安装组件元数据的 styleUrls 属性,它是点名3个外表体制的USportageL地址。

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

U奥迪Q伍L地址必须是绝对于应用程序根目录伊始

平凡,想给3个label或许p等标签增添样式,我们正是那样操作,在Angular中也是同样的。

@Component({
 selector : 'myComponent',
 styles : [`
  :host {
   color: red;
   background-color: blue;
  }
 `]
})
class MyComponent {}

四、模板钦定义link标签

大家得以在模板里停放3个 <link> 标签,与 styleUrls 效果同样。

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

目前,假若笔者想要将字体换来紫蓝呢,首先想到的便是去修改.label里的color属性值,可假使样式表是包装的照旧外部引用的,不便宜修改呢?

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:Angular2怎么着修改父亲和儿子组件样式,Angular五

关键词: Angular... 前端技术 码农的世界 技术宅

上一篇:卓越中的九大HTML伍开垦工具
下一篇:没有了