开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
初露锋芒 Angular6 入门项目 - 2
初露锋芒 Angular6 入门项目 - 2
29 0
Angular2组件库 - Modal组件实现详解(一)
       这篇文章其实写的有点晚了。去年6月份,Angular2的版本刚升级到rc-4,一切都还处于蛮荒时期(虽然现在依然不是太稳定...)。当时为我们的[组件库](http://zorro.alibaba.net/#/docs/angular/introduce)开发[Modal组件](http://zorro.aliba
14944 0
Angular.js入门的样例
感觉这下子,前端的路也宽多了,从容不迫了。 因为可控制的节点又推前了, 有空了好好学一下。 然后结合EXPRESS或METEOR,是不是有点爽? 参考URL: https://toddmotto.
962 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载