Angular 2的组件样式

组件样式定义

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