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

环境:

• 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