阅读(5.4k) 书签赞(0) 我要纠错

Angular4 开发实战：(3) 使用CSS美化组件

2018-06-19 11:25 更新

这章来介绍如何使用CSS美化组件。

基于组件，有两种方式来添加样式：

使用样式模板
使用样式字符串

(1) 使用样式模板

// card.component.ts   
styleUrls: ['./card.component.scss']   

// card.component.scss   
.card {   
  padding: 10px;   
  box-shadow: 0 0 3px rgba(0,0,0,.2);   
  margin: 10px 0;  
}

(2) 使用样式字符串

styles: ['h5 { font-weight: normal; }']

还有一种最简单粗暴的：

<app-card>   
  <h5 style="font-weight: normal">卡头</h5>  
</app-card>

注：虽然可以，但不推荐。

给宿主元素添加样式

先来解释一下何为宿主元素，比如上面我们的自定义组件app-card，这就是宿主元素。

如果我们要给组件模板内部样式中为其添加样式，一般我们想到的是这样：

app-card {   
  display: block;   
  margin: 10px 0;   
  background: #eee;  
}

你会很郁闷的发现无效，咋办呢？Angular还是很友好的，我们可以这样：

:host {   
  display: block;   
  margin: 10px 0;   
  background: #eee;  
}

这样你会发现app-card有背景色啦。

:host就表示当前样式模板的宿主元素。注意：默认情况下，自定义组件的display属性是空字符串的，也就是不占据空间。

如果只要当其有一定条件的时候才显示某个样式，比如只要当宿主元素具有active类时，才出现灰色背景，可以这样：

:host(.active) {   
  background: red;  
}

外部条件

当组件外部有一些条件时，组件内容的样式才变化。最明显的就是主题，比如当某个祖先元素具有CSS类`.theme-blue`时，字体才变为蓝色：

:host-context(.theme-blue) {   
  color: blue;  
}

注：它会在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。 强制给子组件加样式 默认情况下，组件样式只会作用于组件自身的HTML上。我们先再创建一个组件，名为card-header：

// card-header.component.html   

<div class="card-header">   
  卡头  
</div>

然后在app.component.ts中添加：

<app-card>   
  <app-card-header></app-card-header>   
</app-card>

比如你在app/components/card/card.component.scss中添加：

.card-header {   
  font-size: 25px;  
}

上面的代码对子组件card-header里的内容是不起作用的，只有这样：

/deep/ .card-header {   
  font-size: 25px;  
}

/deep/就是用来强制一个样式对各级子组件的视图及其内容都生效。

这里我使用Sass预编译器，更多详情：Sass快速入门下面还有三种内联方式，不过不建议多用：

(1) style标签

<style>  
  div {color: #333;}  
</style>

(2) link标签

<link rel="stylesheet" href="app.css">

(3) import

@import 'app.css';

如发现任何问题或有好的建议，欢迎在下方评论留言。

以上内容是否对您有帮助：

← Angular4 开发实战：(2) 创建组件(Component)

Angular4 开发实战：(4) 属性和事件绑定 →

写笔记

我要补充