Angular中@Component装饰器如何深入理解其组件创建、属性绑定和生命周期钩子等基本知识？

本文共计1913个文字，预计阅读时间需要8分钟。

本文简要介绍Angular中组件（@Component）的基本知识。有一定参考价值，朋友们可参考以下内容，望对大家有所帮助。

环境：Angular CLI: 11.0.6, Angular: 11.0.7, Node: 12.18.3, npm:

Angular组件是Angular框架的核心概念之一，用于构建用户界面。每个组件都是一个独立的代码块，负责渲染UI的一部分。下面是组件的基本知识：

1. 创建组件

使用Angular CLI创建组件非常简单，只需在命令行中运行以下命令：

ng generate component my-component

这将在当前工作区中创建一个名为`my-component`的新组件。

2. 组件结构

组件通常包含以下三个文件：

- `my-component.component.`：定义组件的HTML模板。- `my-component.component.ts`：定义组件的逻辑和样式。- `my-component.component.css`：定义组件的CSS样式。

3. 组件模板

组件模板定义了组件的HTML结构。您可以使用Angular语法来绑定数据、事件和指令。

4. 组件类

组件类定义了组件的逻辑和样式。它继承自`@angular/core`模块中的`Component`类。

5. 组件装饰器

组件装饰器是用于描述组件的元数据的一种方式。在Angular中，`@Component`装饰器用于定义组件的元数据。

6. 组件引用

组件可以相互引用，以实现数据传递和事件通信。

总结：

本文简要介绍了Angular组件的基本知识。希望对大家有所帮助。如有需要，请参考Angular官方文档和社区资源。

本篇文章给大家介绍一下Angular中组件（@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 定义的模板。但你不能在组件中同时拥有这两个语句。

1、html 文件方式

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

2、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

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Angular中组件（@Component）基本知识的详细内容，更多请关注自由互联其它相关文章！