网站首页 » 前端开发 » Angular 2+ » Angular 2+ 组件样式
上一篇:
下一篇:

Angular 2+ 组件样式

前言

angular 2+ 后样式的使用模式有了很大的改变,这可能给我们带来不少的好处,也符合 Angular 2+ 本身的初衷(模块化),第个模块都会有自己样式,互不影响。让我们在修改样式时,只需要关注当前模块就可以了。好了,下面我们开始组件的样式之旅。

组件样式之旅

给组件添加样式有很多种方法,大致跟我们平时引入样式的规则相同。下面我们就来看看组件引入样式的各种套路。

元数据中的样式

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
     h1 { font-weight: normal; }
     h2 { color: red }
    `
  ]
})

export class AppComponent {
  /* . . . */
}

上面我们其实可以用单引号,或者双引号,但我们却用了上面这种新的方式,因为它比前者都强大,样式代码可以换行,这是以前不敢想象的,估计你脑海中早已浮现了一幕幕惨痛的经历了。

元数据中指定样式表的URL

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  /* . . . */
}

这种方法看起来就比较清爽,没有过多的代码。建议开发时使用此方法。添加样式时只需到 app.component.css 中修改就可以。

模板内联样式

在组件的 HTML 模板中嵌入<style>标签,这跟我们平时的写在没什么区别。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      <style>
        h1{font-weight:normal}
        h2{color:red}
      </style>
      <h1>前端网</h1>
      <h2>http://yunkus.com</h2>
  `
})

export class AppComponent {
  /* . . . */
}

模板中的link标签

我们也可以在组件的 HTML 模板中嵌入<link>标签。和 styleUrls 标签一样,这个 link 标签的 href 指向的 URL 也是相对于应用的根目录的,而不是组件文件。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      <link rel="stylesheet" href="./assets/app.component.css">
      <h1>前端网</h1>
      <h2>http://yunkus.com</h2>
  `
})

export class AppComponent {
  /* . . . */
}

CSS @imports 语法

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

用法跟我们平时在 CSS 样式表中的用法一样。

@import "./app.component-import.css";

特殊的选择器

:host 选择器

:host 伪类选择器,用来选择组件宿主元素中的元素。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      <h1>前端云库网</h1>
      <h2>http://yunkus.com</h2>
  `,
  styles: [`
      :host {
        color:#0073aa;
        margin:1px;
        padding:3px;
        display:block;
        border: 1px solid red;
      }
  `]
})

export class AppComponent {
  /* . . . */
}

可以看下图 :host 选择器选中的是 root-app 这个元素,也就是组件的宿主元素。

Angular 2+ 组件样式

你还可以像下面这样使用 :host 选择器:

:host(.active) {
    color: #0073aa;
    margin: 1px;
    padding: 3px;
    display: block;
    border: 1px solid red;
}

在:host 后面添加了(.active),意思就是说只有当宿主元素添加了active 类后样式才会生效。效果如下:

Angular 2+ 组件样式

:host-context 选择器

它在当前组件宿主元素的祖先节点(包括宿主元素)中查找 CSS 类, 直到文档的根节点为止。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      <h1>前端云库网</h1>
      <h2>http://yunkus.com</h2>
  `,
  styles: [`
      :host-context(.acitve) h1{
        color:#0073aa;
        margin:1px;
        padding:3px;
        display:block;
        border: 1px solid red;
      }
  `]
})

export class AppComponent {
  /* . . . */
}

Angular 2+ 组件样式

Angular 2+ 组件样式用法就分享到这里,估计看完本文都不会消耗你一点点脑力,因为你只需要知道有这么一回事就好,到用时就可以再来瞄一眼就行啦。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-component-styles/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END