组件样式定义
- 使用styles在元数据中指定样式
在定义component时可以通过styles字段指定样式,styles接受一个字符串数组,但是通常我们只指定一个字符串就够了。代码如下:
@Component({
selector: 'my-list',
template: `<h2>list of fruits</h2>
<ul>
<li *ngFor="let myItem of itemList">{{myItem.name}}</li>
</ul>`,
styles:[`
ul {list-style:none}
li {color:red}
`]
})
export class ItemComponent{
public itemList = [
{name:"Apple"},
{name:"Orange"},
{name:"Grapes"}
]
}
这样指定的样式只有在ItemComponent才会生效,也就避免了与其他地方定义样式的冲突。
2. 使用styleUrls在元数据加载CSS文件
使用styleUrls属性可以从外部加载CSS文件,代码如下:
@Component({
selector: 'my-list',
template: `<h2>list of fruits</h2>
<ul>
<li *ngFor="let myItem of itemList">{{myItem.name}}</li>
</ul>`,
styleUrls:['app/css/item-list.css']
})
需要指出的是,styleUrls指定的文件是相对于应用程序根目录的。我们的目录结构如下:
src目录是我们指定的应用程序的启动目录,所以我们设置styleUrls为’app/css/item-list.css’。
在组件中使用特定样式
下面我们来看下如何为我们的DOM元素添加背景颜色。
- 使用style直接绑定
<ul [style.background]="'black'"></ul>
为DOM添加class
如果我们的样式文件中定义名为.background_color{}的样式,那么如何在组件中引用的。没错,和普通的使用方式是一样的:
@Component({
selector: 'my-list',
template: `<h2>list of fruits</h2>
<ul class="background_color">
<li *ngFor="let myItem of itemList">{{myItem.name}}</li>
</ul>`,
styleUrls:['app/css/item-list.css']
})
可是如果我们想依据特定的条件来决定是否添加特定样式,该如何去做呢?
对于上述代码我们可以写做:
<ul [class.background_color]="true">
然了对于true值,我们可以写为表达式。如果想添加多个样式的话,就<ul [class.background_color]="true" [class.otherClass]="true">
。
- 使用ngClass
对于上述需求,我们还可以使用Angular 2为我们提供的ngClass来实现:
<ul [ngClass]="{'background_color':true}">