Angular4中CSS几种写法

１．　在原数据中编写

我们可以在 @component 装饰器中添加一个style数组型属性。
这个数组中的每一个字符串定义了一个ＣＳＳ属性。

例如：

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

２．引入外部样式

通过把外部CSS文件添加到 @component 的 styleUrls 属性中来加载外部样式文件。

例如：

@Component({ 
        selector:  'app-root',  
        template:  ` 
                  <h1>Tour of Heroes</h1> 
                  <app-hero-main [hero]="hero"></app-hero-main> 
        `, 
        styleUrls:  ['./hero-app.component.css']  
  })  
export  class  HeroAppComponent  { 
   /* . . . */ 
}

注意：这些在组件中通过这种方式加载的样式文件，只对当前组件起作用，不会作用于其他的组件，同样也不会作用于投影进来的组件。

当我们使用angular/cli来创建组件时：

ng g component componentName;

cli 会自动创建一个空的样式文件，与创建的组件文件在一个文件夹中。

3. 使用`link`标签来引入样式文件

我们甚至还可以在组件的模板中，通过link标签引入样式文件。

例如：

@Component({ 
        selector:  'app-hero-team',  
        template:  `
                <!-- We must use a relative URL so that the AOT compiler can find the stylesheet --> 
                <link rel="stylesheet" href="../assets/hero-team.component.css"> 
                <h3>Team</h3>
                <ul>
                        <li *ngFor="let member of hero.team"> {{member}} </li>
                </ul>
        `  
})

4.CSS @import 语法

还可以利用标准的CSS @import规则，来将其他CSS文件引入到CSS文件中。

5. 外部及全局样式文件

当使用 angular-cli构建时，必须配置.angular-cli.json 文件，使应用能够包含我们想要的外部静态文件，包括CSS文件。

当然，在构建应用的时候，cli工具会自动创建一个 style 文件，我们可以在这个文件中，编写全局样式。

了解更多，可以参考CLI官方文档。

6. 控制视图的封装模式

就像上边提到的，组件的样式默认只能对当前组件有效，而不能作用于其他组件，那如果我们想让某个组件的样式对别的组件也可以起作用，应该怎么办呢？

这时候，就可以通过改变组件元数据中的 encapsulation 来设置组件样式的封装方式。

native，原生，样式不进不出，不能作用于当前组件之外，同时其它组件不能作用于当前组件，主要是指全局样式
emulated，仿真（默认），样式不能出，全局样式能进来。
none ，样式能进能出。

最后编辑于：2018.04.22 20:07:46