Angular 2的组件样式

组件样式定义

使用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}">