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 中构建组件。更重要的是，您将了解整个过程中的每一步。

从第一天起，组件就会在任何 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'。

您还可以选择使用 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。这绝对是将通用样式应用于父组件和子组件的最佳方式。

唱鸭

音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

下载

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 组件中生命周期挂钩中常用接口和方法的快速摘要。该表再次根据实现时首先调用的方法进行排序。

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

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：

    

    	
	


	

		
	


    Add 


    
		Result : {{result}}
	

交互

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 项目 - 这是最好的学习方式！