Angular 组件

什么是 Angular 组件？

正如 Angular 团队所说，组件声明了应用程序可重用的用户界面构建块，并控制着我们称之为视图的屏幕区域。组件是 Angular 应用程序的基本概念或构建块。这意味着一个 Angular 应用程序是一组组件，每个组件都负责管理一个或多个视图。Angular 组件包含了一个视图所需的所有数据、HTML 标记和逻辑。您可以根据需要创建任意数量的组件。

注意：如果您有使用 Angular 1 (也称为 AngularJS) 的经验，您可能熟悉控制器、指令和作用域的概念。这些概念用于将数据和功能绑定到视图。然而，在 Angular 2 或更高版本中，单个组件处理了 Angular 1 应用程序的控制器、指令和作用域所处理的所有功能。这意味着我们能够使用特定的显示、数据和逻辑在 Angular 中定义组件。

每个 Angular 应用程序中至少有一个组件用于在视图中显示数据。从技术上讲，一个组件由三个元素组成，并且只是一个基本的 TypeScript 类

• 类 (TypeScript 类)
• (HTML 模板或模板 URL)
• 装饰器 (@Component 装饰器)

让我们详细讨论一下这些内容

模板：模板定义了用户可以与之交互的界面。您可以将 HTML 标记、指令、绑定等作为模板的一部分进行定义。简单来说，模板渲染了用户界面——应用程序中最终用户可以与之交互的视图。

类：类是组件中最关键的元素，我们可以在其中编写使模板在浏览器中显示所需的代码。这个类可以与任何面向对象编程语言（包括 Java、C++ 和 C#）中的类进行比较。与其他编程语言一样，Angular 组件类也可以拥有变量、方法和属性。

装饰器：在 Angular 类被创建为组件之前，必须使用 @Component 装饰器对其进行装饰。我们将在接下来的帖子中讨论各种现有的装饰器。请注意，装饰器主要用于提供元数据。

注意：所有组件在创建时都必须在 @NgModule 中进行定义。

通过示例解释 Angular 组件

当我们创建一个新的 Angular 项目时，默认情况下，我们会创建一个组件，即 app.component.ts。如下图所示，该文件位于项目的 src 文件夹内的 app 文件夹中。

您的 Angular 应用程序的 app 组件称为 AppComponent，它包含在 app.component.ts 文件中。您可以在 app.component.ts 文件中找到以下代码。

导入 Component 装饰器

如下图所示，您必须先导入 Component 装饰器。这意味着，就像我们在 C# 应用程序中使用类和函数之前导入命名空间一样，您在使用 @Component 装饰器之前必须导入它。

创建一个类

如下图所示，在 TypeScript 中创建类时，必须使用关键字 class，后跟类名。

程序中的其他组件使用此类 (AppComponenprogram to export keywords in typescript, which is quite similar to the public keyword in C# or Java applications. Here, the data type is, by default, a string, and the title is a property. The default value for this attribute when it is first created is "MyAngularApp.")。

在类上使用 component 装饰器

下一步是将 @Component 装饰器应用于类。正如我们在 Angular 中已经讲过的，一个类只能通过使用 @Component 装饰器来指定为一个组件。

组件装饰器有多个属性。我将在本演示中指导您使用内置属性（selector 和 templateUrl）。

如果您希望在 Angular 应用程序中的任何 HTML 页面上使用一个组件，则必须提供 Component 装饰器的 selector 属性。

TemplateUrl

正如我们之前讲过的，@Component 装饰器的 templateUrl 属性包含了您希望在 HTML 页面上渲染的 HTML 文件。除了 template 属性，您还可以使用 template 属性。

当我们构建 Angular 应用程序时会发生什么？

在构建 Angular 应用程序时，TypeScript 文件（.ts 文件）会被编译成相应的 JavaScript 文件（.js 文件）。浏览器将渲染这些 JavaScript 文件。由于我们有一个名为 app.component.ts 的 TypeScript 文件，因此在构建项目时，项目将生成一个名为 app.componet.js 的 JavaScript 文件。

如何在 Angular 中创建组件？

为了使用 Angular CLI 构建一个组件，您需要运行以下命令。

在这里，字母 ng 代表 angular，它将调用 angular CLI。

在这种情况下，generating 被缩写为“g”（您也可以使用完整的单词 generate）。

在这里，“c”代表“component”（也可以使用完整的单词“component”）。在这种情况下，将被创建的元素是一个组件（您也可以创建管道、指令、类、安全性、接口、枚举和模块）。

在这种情况下，component name 是组件的名称。

假设您希望创建一个名为 MyComponent 的组件，您需要在控制台中运行 ng g c MyComponent 命令并按运行，如下图所示。

输入必要的命令并按 Enter 键后，生成组件需要一些时间。组件成功创建后，应出现以下输出。

如上输出所示，它将生成四个文件。除了 ts 文件外，它还将生成 HTML、spec 和 CSS 文件。这四个文件将被放置在 MyComponent 文件夹中，该文件夹将在您的项目中创建，并在下面的图片中显示在 app 文件夹内。

正如我们在文章前面提到的，为了使用组件，我们需要在根模块 AppModule 中提供对它的引用。这个根模块位于 app.module.ts 文件中。当您打开 app.module.ts 文件时，Angular 框架会自动将对我们最近生成的 MyComponent 组件的引用包含在 declarations 数组中。

修改 my-component.component.ts 文件

我们只是在 my-component.component.ts 文件中添加了一个名为 MyVariable 的变量，其默认值为“Welcome to Angular Tutorials”，如下图所示。

理解 Angular 组件和模块架构

正如我们已经讲过的，Angular 的主要目标是连接模型和视图。绑定代码在 Angular 术语中称为 Component。企业项目可能包含大量组件。由于组件数量众多，我们发现管理项目非常困难。我们可以将组件逻辑地分组到模块中。为了更好地理解，请看下图。

• 组件：- 这将包含绑定 UI 和模型的绑定逻辑。
• 模块：- 这将逻辑地对组件进行分组。

组件是 Angular 中用户界面的基本单元。它们包含特定用户界面区域的视图/模板、数据和逻辑。下面是 Angular 组件的概述

Component Class

配备 @Component 装饰器的 TypeScript 类是每个组件的表示。方法和属性指定组件的行为，这些内容包含在该类中。

模板/视图

模板包含描述组件用户界面 (UI) 的 HTML 内容。这可以包括使用 Angular 模板语法绑定到组件的属性和方法。

元数据

@Component 装饰器提供了选择器、模板、样式和其他关于组件的细节。

选择器

选择器是一个 CSS 选择器，用于查找父组件模板中指向需要实例化组件的位置的 HTML 元素。

数据绑定

Angular 提供了多种数据绑定技术，包括插值、属性绑定、事件绑定和双向绑定。这些过程使得组件类与其模板之间的数据绑定成为可能。

输入和输出属性

组件可以使用这些来与它们的父组件进行通信。组件的输出属性允许它将事件发送回父组件，而其输入属性允许数据进入组件。

依赖注入

通过将依赖项注入到组件的构造函数中，您可以轻松地访问服务、其他组件或任何其他依赖项，这是 Angular 的依赖注入框架的功劳。

结论

总之，Angular 组件是 Angular 应用程序的基本构建块；它们包含了许多实用组件的数据、逻辑和用户界面。它们提供了一种结构化的方法来管理和构建用户界面，从而促进了模块化、可重用性和可维护性。

凭借依赖注入、输入和输出属性、数据绑定和生命周期钩子等功能，Angular 组件为开发人员提供了构建动态和交互式 Web 应用程序的强大工具。通过熟练掌握 Angular 开发并创建符合现代 Web 开发标准的高质量应用程序，需要理解如何设计和实现 Angular 组件。