Angular从零到一2.6 组件样式-阿里云开发者社区

开发者社区> 华章出版社> 正文

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切换到本章代码。

 

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接