Angular从零到一2.6　组件样式

2.6　组件样式

刚刚我们其实已经使用了组件样式，这里简单介绍一下什么是组件样式。对于我们写的每个Angular组件来说，除了定义HTML模板之外，我们还要定义用于模板的 CSS 样式，指定任意的选择器、规则和媒体查询。

实现方式之一，是在组件的元数据中设置styles属性。styles属性可以接受一个包含 CSS 代码的字符串数组。通常我们只给它一个字符串就行了，就像我们在LoginComponent中做的那样：

@Component({

  selector: 'app-login',

  template: '

    <div>

      <input type="text"

        [(ngModel)]="username"

        />

      <input type="password"

        [(ngModel)]="password"

        />

      <button (click)="onClick()">Login</button>

    </div>

  ',

  styles: ['

    input.ng-invalid{

      border: 3px solid red;

    }

    input.ng-valid{

      border: 3px solid green;

    }

  ']

})

组件样式在很多方面都不同于传统的全局性样式。我们放在组件样式中的选择器，只会应用在组件自身的模板中。上面这个例子中的input选择器只会对 LoginComponent模板中的<input>标签生效，而对应用中其他地方的<input>元素毫无影响。

这种模块化相对于CSS的传统工作方式有如下优点：

CSS 类名和选择器是控件范围的。属于组件内部的，它不会和应用中其他地方的类名和选择器出现冲突。

组件的样式不会因为别的地方修改了样式而被意外改变。

可以让每个组件的CSS代码和它的TypeScript、HTML代码放在一起，这将构成清爽整洁的项目结构。

修改或移除组件的CSS代码时，不用搜索整个应用来看它有没有被别处用到。

本章代码：https://github.com/wpcfan/awesome-tutorials/tree/chap02/angular2/ng2-tut

打开命令行工具使用 git clone https://github.com/wpcfan/awesome-tutorials 下载。然后键入git checkout chap02切换到本章代码。