介绍
组件是当今广泛使用的术语，越来越多的人正在使用组件及其各种属性。那么让我们看看它们是什么以及如何使用它们。
Angular 中的组件是什么？
Angular 中的组件是应用程序的关键和基本构建块。每个 Angular 应用程序可能都有一个由不同组件组成的树，这些组件根据组件实现的功能进行分类。
Angular 遵循基于组件的架构，这意味着每个 Angular 应用程序都应包含至少一个组件才能运行 Angular 应用程序。它使用 MVC（模型视图控制器）模式，其中视图将由组件管理，因为视图（HTML）将根据组件提供的数据进行呈现。
简而言之，组件是 Angular 中的一切；因此，它只是一种可以使用Class关键字创建的组件指令。
为什么要使用组件？
原因有很多，但以下列举几个主要原因。
- 简化基于组件的架构
- 组件可重用性
- 基于组件的开发提高了应用程序的整体性能
- 轻松进行错误处理
组件元数据
让我们看一个组件装饰器的简单例子。
演示应用程序.组件.ts
@Component({
selector: 'demo-app',
templateUrl: './demo=app.component.html',
})
在上面的例子中，我们可以看到组件类有一个名为@Component的装饰器，以及selector和templateUrl等不同的属性。
Angular 中的组件元数据是什么？
组件元数据保存有关当前组件的完整信息，该组件表示作为组件的单个单元，以及其内容，如业务逻辑和视图配置。
为了表示数据，我们应该使用下面解释的一些属性。
选择器
这是组件的唯一标识符，当可以找到同一组件的 URL 及其视图时，用于呈现该组件。
如果我们想要渲染任何组件，那么它是与组件装饰器一起使用的强制性元数据类型之一。
模板网址
它是表示特定组件的可视部分的视图文件 (HTML) 的 URL。基本上，模板 URL 可以包含与组件一起维护的 HTML 文件的 URL。
模板
我们已经看到了接受视图文件的 URL 路径的元数据templateUrl，但并不总是必须使用单独的文件来表示视图。
我们还可以使用模板元数据直接在组件中指定视图内容。
提供者
基本上，它是提供程序的值数组，用于提供当前组件正在使用的服务。因此，它不是必需属性，如果我们不需要它，我们可以忽略它。
如何在 Angular 中创建组件
我们可以用不同的方式创建组件，其中一种方法是使用以下命令的Angular CLI 。
ng new component <component_name>
例如：
ng new component app
这是在 Angular 中创建组件的基本命令。现在，让我们看看我们的新组件是什么样子。
App 组件代码（app.component.ts）
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Hello World in Angular';
}
以上是我们的组件文件。除了装饰器，我们还使用了templateUrl来表示当前组件的视图。视图文件将如下所示：
视图代码（app.component.html）
<p>
Hello Angular: {{name}}
</p>
如您所见，在视图文件中，我们只显示纯文本。因此，我们可以根据业务需求随意处理 HTML 内容。
组件模板
为了渲染组件的视图，我们需要定义不同的 HTML 控件。在 Angular 2+ 中是可能的，并且被称为 View。View只是一个特定 Angular 组件的 HTML 文件。
我们可以用两种不同的方式创建 HTML 文件以及组件。下面将进行解释。
第一种方法
第一种方法是创建一个 HTML 文件并传递该文件的 URL，如下所示：
演示.组件.html
<table border="5">
<!-- First Row -->
<tr>
<td>Column 1 Row 1</td>
<td>Column 2 Row 1</td>
<td>Column 3 Row 1</td>
</tr>
<!-- Second Row -->
<tr>
<td>Column 1 Row 2</td>
<td>Column 2 Row 2</td>
<td>Column 3 Row 2</td>
</tr>
</table>
创建上述 HTML 文件后，我们可以将模板 URL 传递给组件，如下所示：
演示.组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'demo',
// Passing template URL
templateUrl: './demo.component.html',
})
export class AppComponent {
name = 'Using template in Angular';
}
我们可以看到，有一个名为templateUrl的元数据属性，它接受组件模板（视图）的 URL，并将 HTML 内容呈现给浏览器
第二种方法
第二种方法是使用 Angular CLI 命令生成组件，其中将自动创建模板（视图）文件。下面是生成测试组件的简单命令。
ng new component test
执行上述 CLI 命令后，我们可以看到自动创建了三个不同的文件。它们列在下面。
- 测试.组件.ts
- 测试.组件.html
- 测试.组件.css
当我们打开test.component.html时，会自动生成一个<p>标签，并且它会在运行 Angular 应用时呈现。
这是渲染组件模板的两种不同方法，但我们也可以在组件本身内部编写内联 HTML 内容。
内联组件模板
为了在组件内部写入模板内容，我们可以利用模板元数据。
它接受 HTML 内容，就像我们在单独的文件内使用不同的 HTML 控件一样，但不同之处在于，如果我们的元素数量很少，那么我们就不需要创建单独的文件并在组件内指定它。
确保使用反引号（“”）以及 HTML 元素指定 HTML 内容，如下例所示。
我的应用程序.组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
// Inline template
template: `<div>
<p>This is inline template demo
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Hello World in Angular';
}
在此示例中，我们使用模板元数据属性在 Angular 组件中指定内联模板，但如果您要呈现有意义的 HTML 内容，建议使用单独的 HTML 文件。否则，将模板和业务逻辑管理到单个组件文件中会很困难。
组件样式
组件的样式是关键的构建块，它直接影响用户对应用程序的接受度 - 是的，用户体验。
Angular 组件允许我们提供一种设置组件样式的方法。这意味着我们可以为特定组件提供不同的 CSS 样式、规则和其他特定于设备的样式配置。
为此，Angular 组件具有根据您的不同需求和要求的元数据属性。这些解释如下。
样式网址
TemplateUrl 属性接受样式表文件的 URL，我们在其中编写了不同 HTML 元素的样式规则。
我们可以像这样将模板样式的文件 URL 提供给组件。
我的应用程序.组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
// Using stylesheet URL
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Styling Component in Angular';
}
这里app.component.css是样式表文件，我们可以在其中为 HTML 元素编写不同的 CSS 规则和指南，并可以像这样将其应用于组件。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
