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({
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 定义的模板。但你不能在组件中同时拥有这两个语句。
- html 文件方式
@Component({
selector: \'app-component-overview\',
templateUrl: \'./component-overview.component.html\',
})
- 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属性 （视图封装模式）。通过在组件的元数据上设置视图封装模式，你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种：
- Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1。(说明：只进不出，全局样式能进来，组件样式出不去)
- ShadowDom 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(说明：不进不出，没有样式能进来，组件样式出不去。)
- 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 —————-
======================