Angular 组件：初学者综合指南

构建单页应用程序是一门艺术，有许多令人印象深刻的框架可供选择。 Angular 是构建 Web 和移动应用程序最直观、最广泛使用的框架之一。今天，Angular 10 已经发布了，并且有许多令人印象深刻的功能。然而，在深入挖掘之前，您需要掌握组件。

首要任务：设置依赖项

在尝试 Angular 之前，您需要确保已成功安装以下依赖项：

• Node.js
• Angular CLI

您可以使用 NPM 全局安装 Angular CLI。

npm install -g @angular/cli

现在，您可以通过几种不同的方式启动 Angular 项目：

• 手动创建它
• 使用 Angular CLI
• 从 GitHub 克隆并运行项目

以下是使用 Angular CLI 创建新项目的方法：

ng new my-project-name
cd my-project-name

就是这样！现在你的 Angular 之旅已经开始了。在这篇文章中，我们将构建一个简单的计算器，用于使用 Angular 将两个数字相加。

什么是角度组件？

在 Angular 中，我们使用指令。指令分为三种类型：结构指令、属性指令和组件指令。在接下来的几节中，我们将深入探讨有关组件的所有内容。

Angular 中的组件是我们设计和构建的用于渲染 UI 项目的元素。这些 UI 项目将允许用户与应用程序交互并访问其功能。

在本教程结束时，您将能够在 Angular 中构建组件。更重要的是，您将了解整个过程中的每一步。

从第一天起，组件就会在任何 Angular 项目中使用。在某种程度上，您可以将任何 Angular 项目视为由许多连接组件组成的树。每个组件都有一个特定的功能和一个渲染它的模板。单个模板可以在多个组件中重复使用。组件的集合形成了一个 Angular 应用程序，最终在浏览器中看到。

组件就像一个类，其中封装了元素的行为及其视图。行为包括加载或呈现的数据以及用户交互的方式，其视图是定义如何呈现数据的模板。

构建计算器组件

让我们通过创建一个用于添加两个数字的 Angular 组件来了解组件。我们不会在本教程中逐步创建组件，但您可以在我们的 GitHub 存储库中找到此应用程序的完整代码。

使用 Component 装饰器定义组件

Component 装饰器用于在 Angular 中定义组件。定义组件的元数据如下：

@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class Calculator{
  
}

在上面的定义中，selector 告诉应用程序该组件需要用于应用程序 HTML 的哪些元素。 templateUrl 告诉应用程序可以呈现什么。上面装饰器中的其他所有内容都是可选的。

什么是选择器？

selector 是 Angular 中的一个重要属性。它帮助应用程序确定组件的放置位置。选择器始终是一个字符串。选择器可以通过三种不同的方式定义，每种方式都有独特的用例：

• selector: 'calculator' 当组件将被指定为 HTML 中的 元素时可以使用。
• selector: '.calculator' 如果组件要用作 CSS 元素，则可以使用 在 HTML 中。
• selector: '[calculator]' 当组件应该用作属性时可以使用，它看起来像 .

选择器可以简单也可以复杂，但黄金法则是使选择器尽可能简单。

什么是模板？

templateUrl 用于标识组件将使用的模板。模板的路径应该是相对的。对于与组件源代码位于同一文件夹中的模板，您可以使用 templateUrl: './calculator.html' 或 templateUrl: 'calculator.html'。

不要使用服务器上 HTML 文件的绝对 URL。如果这样做，应用程序将无法编译。为什么？ Angular 2+ 始终预编译代码并确保模板在构建过程中内联。

您还可以选择使用 template 选项将 templateUrl 选项替换为内联模板。这在简单组件中很有用，其中 TypeScript 代码和 HTML 不必位于不同的文件中。

这种做法对最终的应用没有任何影响。为什么？无论采用哪种方法，都会生成单个捆绑包。

什么是 styleUrl？

组件从来都不是简单的；它总是充满多种风格。 styleUrl 属性的作用是帮助您包含特定于组件的 CSS。就像模板一样，您可以通过 styles 属性使用内联样式。但如果代码具有大量样式，则需要将其分离到不同的文件中。

请注意，styleUrl 始终采用一个数组，因此您可以添加多个样式表。

样式封装

Angular 组件始终鼓励样式隔离和完整封装。这意味着子组件或父组件中的样式不会影响 UI 层次结构中的其他组件。

为了控制样式封装，Angular 在 Component 装饰器中提供了一个名为 encapsulation 的属性。封装可以具有以下值之一：

• ViewEncapsulation.Emulated 是默认值。它创建填充样式来模拟影子根和 DOM。
• 如果您的浏览器本身支持影子 DOM，则 ViewEncapsulation.ShadowDom 是最快的。
• ViewEncapsulation.None，正如其名称所示，使用全局样式并避免任何形式的封装。

在我们的计算器组件中使用 encapsulation 属性的语法如下：

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator{}

在上面的示例中，我们选择了 ViewEncapsulation.None。这绝对是将通用样式应用于父组件和子组件的最佳方式。

Angular 组件和模块

在深入了解组件生命周期之前，让我们先看看组件和模块是如何相互链接的。我们的计算器应用程序的模块如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果您创建组件，则必须将其包含为模块的一部分。

如果不将新创建的组件添加到模块中，则会出现错误。

要将组件添加到模块，必须首先导入它。首先，必须将导入的文件添加到 declarations 数组中。现在，该组件在整个应用程序中都是可见的，并且可以被其他组件使用。

让我们看看 @NgModule 指令中的每个数组代表什么：

• declarations 确保指令和组件在模块的范围内可用。 Angular CLI 具有一项功能，可以将指令和组件自动添加到模块中。
• imports 用于导入和访问其他模块。这允许开发人员在应用程序中包含第三方模块。
• 如果您的项目创建一个库或多个模块，则使用 exports 。如果组件未导出，则无法在其他地方使用。

组件生命周期

我们现在准备了解组件和指令的生命周期。请记住，每个组件都有一个生命周期，从创建到销毁。渲染组件的那一刻，该组件及其子组件的生命周期就开始了。

了解生命周期事件在 Angular 应用程序中非常有用，它可以帮助开发人员正确观察和响应事件。

以下是 Angular 组件的生命周期挂钩，按照调用每个挂钩的顺序排列。

1. 组件构造函数
2. ngOnChanges
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ngAfterContentChecked
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

创建组件时，会调用 构造函数 。接下来，按照上述顺序调用各种钩子。某些挂钩（例如 OnInit 和 AfterContentInit）将仅被调用一次。同时，只要组件中的内容发生更改，就会调用其他挂钩。最后，onDestroy 被调用一次。

上面的生命周期钩子有一个接口。要使用钩子，您应该实现该接口。通常，该接口带有函数，以 ng 开头。例如，如果要使用 ngOnInit 函数，则组件必须实现 OnInit 接口。以下是 Angular 组件中生命周期挂钩中常用接口和方法的快速摘要。该表再次根据实现时首先调用的方法进行排序。

界面	方法	目的
OnChanges	ngOnChanges	在构造函数之后以及输入值发生更改时调用。
OnInit	ngOnInit	仅调用一次。非常特定于组件或指令。它是从服务器加载数据的最佳位置。
DoCheck	ngDoCheck	当 Angular 无法自动检查更改或绑定时，使用此方法。它通知组件任何变化。
AfterContentInit	ngAfterContentInit	仅调用一次。它由组件初始化触发。
AfterContentChecked	ngAfterContentChecked	在组件内容的每次更改时调用。
AfterViewInit	ngAfterViewInit	一旦每个子组件都被初始化，就会调用这个生命周期钩子。视图可能没有完全渲染，但内部视图已经由 Angular 准备好了。
AfterViewChanged	ngAfterViewChecked	一旦每个子组件都经过验证和更新，就会调用此挂钩。
OnDestroy	ngOnDestroy	如果组件准备好从 UI 中删除或销毁，则会调用此挂钩。这是保留取消订阅和取消注册可观察对象或计时器的侦听器的好地方。

现在，如果您想将生命周期挂钩添加到我们的计算器组件中，它将显示如下：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator implements OnInit {
                                     
  constructor() {}

  ngOnInit(): void {
    console.log('Component - On Init');
  }

}

创建计算器组件

我们正在构建的计算器应用程序的 UI 如下所示。

这是我们将添加到组件模板中的 HTML：

<div class="row">
    <div class="col-12">
    	<input [(ngModel)]="number1" type="number" name="" placeholder="number">
	</div>
</div>
<div class="row">
	<div class="col-12">
		<input [(ngModel)]="number2" type="number" name="" placeholder="number">
	</div>
</div>
<button (click)="add()" class="button">
    Add 
</button>
<div class="result">
    <span>
		Result : {{result}}
	</span>
</div>

交互

UI呈现后，用户将对应用程序执行操作。现在，应用程序必须做出相应的响应。例如，当用户输入两个数字并单击添加时，我们的计算器必须进行添加。使用此功能连接输入框的最简单方法是通过 ngModel。在 HTML 模板文件中，每个输入都可以链接到 ngModel 变量。您可以在上面的 HTML 中看到，我们有许多 ngModel 属性将 HTML 元素链接到我们的 TypeScript 代码。这些变量将在计算器组件源代码中声明和使用。

让我们看看如何在计算器的 TypeScript 代码中使用 ngModel 变量。

//the component
import { Component } from '@angular/core';

@Component({
  selector: 'calc',
  templateUrl: 'calc.component.html',
  styleUrls: ['calc.component.css']
})
export class CalcComponent {
  public number1 : number;
  public number2 : number;
  public result : number;

  public add(){
      this.result = this.number1 + this.number2
  }
}

每次用户在输入框中输入值时，this.number1 和 this.number2 都会相应更新。为什么？ ngModel 用于捕获输入。

当用户点击添加按钮时，将调用 add 函数。如何？我们利用 (click) 控件将按钮连接到 add 方法。

当调用 add 时，this.result 根据 this.number1 和 this.number2 进行更新。一旦 this.result 更新，UI 也会更新。如何？ {{result}} 链接到 this.result。

这就结束了！

我希望本教程有用。现在，您应该了解 Angular 组件的基础知识。您刚刚了解了如何定义组件、利用各种生命周期挂钩，以及最终进行用户交互。这仅仅是个开始。 Angular 组件还有很多东西。

本教程中功能齐全的源代码可在 GitHub 上获取。看一看，并尝试创建您自己的 Angular 项目 - 这是最好的学习方式！

以上就是Angular 组件：初学者综合指南的详细内容，更多请关注编程之家其它相关文章！