Angular入门到精通系列教程（7）- 组件（@Component）基本知识

Dear 丶 2023-01-05 12:23 236阅读 0赞

### 文章目录 ###

*  1. 概述
 *  2. 创建Component
 *   *  2.1. 组件模板
 *  3. 视图封装模式
 *   *  3.1. 特殊的选择器 :host
     *  3.2. inline-styles
 *  4. 总结

> 环境:
> 
>  *  Angular CLI: 11.0.6
>  *  Angular: 11.0.7
>  *  Node: 12.18.3
>  *  npm : 6.14.6
>  *  IDE: Visual Studio Code

# 1. 概述 #

组件是 Angular 应用的主要构造块。每个组件包括如下部分：

*  一个 HTML 模板，用于声明页面要渲染的内容
 *  一个用于定义行为的 Typescript 类
 *  一个 CSS 选择器，用于定义组件在模板中的使用方式
 *  （可选）要应用在模板上的 CSS 样式

Component可以是一个页面，也可以是一个组件（控件）。总是，是一个页面元素。

任何一个Component都是NgModule的一部分，这样它就可以被其他应用和其他Component所调用。为了定义Component是NgModule的一个成员之一，开发者应该在NgModule的declarations属性中，将自己开发的Component列出。

另外，通过Component修饰符（也就是@Component）开发者可以配置元数据，这样通过各式各样的Life-Cycle hooks，Components就可以控制他们的运行环境。

# 2. 创建Component #

基于AngularCLI，可以很方便的创建Component。在要创建Component的目录下，执行如下命令

ng generate component <component-name>

e.g. `ng generate component MyComponent`  
AngularCLI会自动生成一个文件夹和4个文件：

*  一个以该组件命名的文件夹（e.g my-component)
 *  一个组件文件 < component-name >.component.ts（e.g my-component.component.ts)
 *  一个模板文件 < component-name >.component.html（e.g my-component.component.html)
 *  一个 CSS 文件， < component-name >.component.css（e.g my-component.component.css)
 *  测试文件 < component-name >.component.spec.ts（e.g my-component.component.spec.ts)

> 对于Component，所有文件名都会自动增加Component后缀，所以不建议< component-name > 中带有‘component’这个单词。

@Component({ 
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      styleUrls: ['./my-component.component.css']
    })
    export class MyComponentComponent implements OnInit { 
    
      constructor() {  }
    
      ngOnInit(): void { 
      }
    
    }

以上是核心的ts文件，指定了selector(CSS 选择器)，template（html）文件，css文件。html/css文件如果需要可以多个component公用。尤其是css，可以看到参数是Array，所以可以制定多个css。

## 2.1. 组件模板 ##

组件模板，即HTML部分，可以是一个html文件，也可以是一段html描述，是等价的。Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。

1.  html 文件方式

@Component({ 
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
    })

1.  html代码方式

@Component({ 
      selector: 'app-component-overview',
      template: '<h1>Hello World!</h1>',
    })

# 3. 视图封装模式 #

在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。

@Component({ 
      selector: 'app-my-component',
      templateUrl: './my-component.component.html',
      encapsulation: ViewEncapsulation.None,
      styleUrls: ['./my-component.component.css']
    })

可以看到，增加了一个`encapsulation`属性 （视图封装模式）。通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种：

1.  Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1。(说明：只进不出，全局样式能进来，组件样式出不去)
2.  ShadowDom 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(说明：不进不出，没有样式能进来，组件样式出不去。)
3.  None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。

## 3.1. 特殊的选择器 :host ##

使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。 :host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

e.g.

:host { 
    }

## 3.2. inline-styles ##

默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：`ng generate component MyComponent --inline-style`。

生成component如下

@Component({ 
      selector: 'app-my-component',
      template: '<h1>Hello World!</h1>',
      styles: ['h1 { font-weight: normal; }']
    })

# 4. 总结 #

*  Angular CLI辅助创建一个component所需的多个文件
 *  建议html/css/ts分开
 *  在期望目录下执行Angular CLI命令，可以生成到制定目录
 *  `ng generate component XXX` 可以简写为 `ng g c`

> \---------------- END ----------------

> ======================