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 中的 <calculator></calculator> 元素時可以使用。
• 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 元件：初學者綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！