Angular学习笔记58：组件的样式设置，样式作用范围，引入样式的方式

关于Angular的每一个组件的样式，有两种设置方式

1. 使用内联的组建样式
   言简意赅的说就是，在每个组件的类文件中，在@Component的元数据的style数组中定义这个组件的样式，在新建一个组件的时候，Angular/cli 会将自动使用非内联的样式；当在新建一个组件的时候，就将这个组件定义为使用内联的样式，则需要这样使用命令：

ng generate component componentName —inline-style

这个时候，创建的组件的各个文件中，相比命令：

ng generate component componentName 

创建的组件来比较，这个时候，会少一个CSS文件，或者其他可编译的样式文件（LESS，Sass这里文件）。

注意：
a.在这里说明一下，使用Angular/cli版本在6.x以上的版本的时候，新建一个Angular项目的时候，在 terminal 中，会有界面让开发者去选择使用的样式文件类型。
b.即使在新建的时候选择了CSS或者想更换样式文件类型的时候，可以在项目的根目录的Angular.json中进行更改。

2. 使用使用链式的组件样式
   在使用Angular/cli去创建一个新组件的时候，Angular/cli会默认的使用链式组件样式，在新建的组件的类文件中，在@Component的装饰器的元数据中，会发现一个styleUrls的元数据，这个元数据的类型也是一个数组，这里链接的就是类文件外的样式文件，由于是数组，那就说明，在组件中，可以链接不止一个外部的样式文件（有待验证），
   同样，在一个组件中使用两个甚至多个组件样式表的时候，也可以在链接的外部样式文件中进行引入，使用@Import来引入其他样式文件。

样式的作用范围：

对于一个组件，不论其使用内联样式，还是链式的样式，其中的样式作用都仅仅是在这个组件的模版文件中，即使将这个组件作为子组件，使用到父组件中，父组件的样式对子组件的事没有影响的。子组件中使用了和父组件相同类型的选择器，并且选择器的名称是相同的，此时，父组件的作用于父组件，子组件的作用于子组件，两个互不影响。
这样“模块化”的处理样式问题的好处：
A. 定义规定的作用范围，再父组件的样式被修改后，不用担心有其他的子组件有连锁反应。
B. 可以对每一个组件的选择的名称使用最有意义的命名方式。不用担心这个名称在众多的样式名称中是否重复的问题。
C. 每个组件将组件自己的模版文件、类文件（TypeScript文件）、样式文件放置于同一个目录下，或者在同一个类文件（TypeScript文件）中，分级层的去显示这个组件的每个部分，从而使代码更整齐。
D. 作用范围小，不用担心在这里删除某一个样式，从而影响其他模版。
3. 在模版文件中，使用

注意：
在使用第四种方式来定义样式时，同时又使用Angular/cli来构建这个应用的时候，需要确保以方式引入的文件在服务器的正确目录中。否则可能出现找不到文件，从而导致引入失败的情况。

5. 使用全局样式：在整个应用中，如果对某一个模版始终使用的是同一个样式，那么就可以将这个样式定义到全局的样式表中，在src/目录下，会发现有一个style.css文件，在这个文件中，就可以定义全局的样式了。
   注意：这里的样式会影响整个应用中的涉及到的模版。

建议：

1. 在组件较小时，建议使用将整个组件写入一个类文件中，当然，如果为了整体文件的整体性，也可以使用链式引入的方式
2. 在一个项目中，可以不一定用CSS，也可以使用LESS或者SASS等。

视图封装模式

在上面的时候，每个组件的作用范围是该组件内的所有模版，也就是每个组件仅仅封装的是自己本身的模版内容。
但是在Angular中，每一个组件的样式封装范围是可以在@Coponent的元数据中是可以更改的，通过设置encapsulation 这个属性就可以设置其封装的范围了。
可以设置的范围如下：

1. ShadowDom 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。在这种模式下，设置的全局的样式（根目录下的style.css文件）是不用于这个组件中，当前组件定义的样式仅仅作用于当前组件的模版。
   注意：部分浏览器可能会出现不支持的情况。
2. Native 视图包装模式使用浏览器原生 Shadow DOM 的一个废弃实现
3. Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。设置在全局的样式（根目录下的style.css文件）中设置的样式可以作用于这个组件中，但是其他组件的不可以
4. None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。在这种模式下，全局的样式，自己定义的样式，都不会做限制。
   部分摘自Angular文档

引入样式的几种方式

1. 元数据中直接设置的样式
   在@Component 装饰器添加一个 styles 数组型属性，在这个数组中，添加样式信息。

@Component({
  selector: 'app-demo',
  template: `
    
appDemo
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class DemoComponent {
/* . . . */
}

注意:此时的样式只在当前组件中生效。既不会作用于模板中嵌入的任何组件，也不会作用于投影进来的组件（如 ng-content ）。

2. 组件元数据中引入外部的样式文件
   在@Component 装饰器中添加一个 styleUrls 数组型属性，在这个数组中，添加样式文件的信息。
   例如：

@Component({
  selector: 'app-parent-com',
  templateUrl: './parent-com.component.html',
  styleUrls: ['./parent-com.component.less']
})

3. 模版中内联的样式

模版中内联的样式分三种:

• 在模版中引入style标签
• 在标签内使用style属性
• 通过link标签引入

<nz-layout>
  <link rel="stylesheet" href="../assets/xx.css">
  <style>
    nz-sider{
      background:#fff
    }
  style>
  <nz-header class="header">
    <div><span routerLink="/introduce">Demo-Test W先生的Blog的练手场span>div>
  nz-header>
  <nz-layout>
    <nz-sider [nzWidth]="200" >
      <app-demo-sider>app-demo-sider>
    nz-sider>
    <nz-layout>
      <nz-content class="routerContent">
        <router-outlet>router-outlet>
      nz-content>
    nz-layout>
  nz-layout>
nz-layout>

4. 通过CSS 的 @import 引入

@import "../public/less/demotest";