Angular 笔记9（组件与模板——组件样式）

组件样式

使用组件样式

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

在@Component装饰器中的styles或styleUrls数组中，可以是字符串，也可以是样式文件的访问路径。

范围化的样式（style scope）

在 @Component 的元数据中指定的样式只会对该组件的模板生效。

特殊的选择器

:host

使用 :host 伪类选择器，用来选择组件宿主元素中的元素，作用的是当前组件的最外层DOM元素。

@Component({
  selector: 'app-hero-main',
  template: `
    <app-quest-summary></app-quest-summary>
    <app-hero-details [hero]="hero" [class.active]="hero.active">
      <app-hero-controls [hero]="hero"></app-hero-controls>
    </app-hero-details>
  `
})

app-hero-details组件的样式

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

这个:host作用的就是app-hero-details这个组件。

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

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

只有当前宿主元素同时带有 active CSS 类的时候才会生效。

:host-context

在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。

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

从该组件逐级往上找，知道找到theme-light样式类，才会把 background-color 样式应用到组件内部的所有 <h2> 元素中。

已废弃 /deep/、>>> 和 ::ng-deep

未来将在 Angular 中移除对它们的支持（包括 /deep/、>>> 和 ::ng-deep）。 目前，建议先统一使用 ::ng-deep，以便兼容将来的工具。

任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用，该样式就会污染其它组件。

app-hero-details组件：

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

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

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

子组件：

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'app-hero-team',
  template: `
    <!-- We must use a relative URL so that the AOT compiler can find the stylesheet -->
    <link rel="stylesheet" href="../assets/hero-team.component.css">
    <h3>Team我是h3</h3>
    <ul>
      <li *ngFor="let member of hero.team">
        <h3>{{member}}1</h3>
      </li>
    </ul>`
})
export class HeroTeamComponent {
  @Input() hero: Hero;
}

:host /deep/ h3 作用到了宿主元素的所有子组件的h3标签上。

把样式加载进组件中

• 设置 styles 或 styleUrls 元数据
• 内联在模板的 HTML 中
• 通过 CSS 文件导入

CSS @imports 语法

在这种情况下，URL 是相对于你正在导入的 CSS 文件的。

外部以及全局样式文件

当使用 CLI 进行构建时，你必须配置 angular.json 文件，使其包含所有外部资源（包括外部的样式表文件）。

在它的 styles 区注册这些全局样式文件，默认情况下，它会有一个预先配置的全局 styles.css 文件。

非 CSS 样式文件

如果使用 CLI 进行构建，那么你可以用 sass、less 或 stylus 来编写样式，并使用相应的扩展名（.scss、.less、.styl）把它们指定到 @Component.styleUrls 元数据中。
当使用 ng generate component 命令生成组件文件时，CLI 会默认生成一个空白的 CSS 样式文件（.css）。 你可以配置 CLI，让它默认使用你喜欢的 CSS 预处理器。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
...