Komponen Sudut: Panduan Komprehensif untuk Pemula

Membina aplikasi satu halaman adalah satu seni dan terdapat banyak rangka kerja yang mengagumkan untuk dipilih. Angular ialah salah satu rangka kerja yang paling intuitif dan digunakan secara meluas untuk membina aplikasi web dan mudah alih. Hari ini, Angular 10 telah dikeluarkan, dan ia dilengkapi dengan banyak ciri yang mengagumkan. Sebelum anda menggali lebih dalam, bagaimanapun, anda perlu menguasai komponen.

Perkara pertama: menyediakan tanggungan

Sebelum mencuba Angular, anda perlu memastikan anda telah berjaya memasang kebergantungan berikut:

• Node.js
• CLI sudut

Anda boleh memasang Angular CLI secara global menggunakan NPM.

npm install -g @angular/cli

Kini anda boleh memulakan projek Angular anda dalam beberapa cara berbeza:

• Buat secara manual
• Menggunakan Angular CLI
• Klon dan jalankan projek daripada GitHub

Begini cara membuat projek baharu menggunakan Angular CLI:

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

Itu sahaja! Kini perjalanan Angular anda telah bermula. Dalam artikel ini, kami akan membina kalkulator mudah untuk menambah dua nombor menggunakan Angular.

Apakah komponen sudut?

Dalam Angular kami menggunakan arahan. Terdapat tiga jenis arahan: arahan struktur, arahan atribut dan arahan komponen. Dalam beberapa bahagian seterusnya, kita akan menyelami segala-galanya tentang komponen.

Komponen dalam Angular ialah elemen yang kami reka dan bina untuk memaparkan projek UI. Item UI ini akan membolehkan pengguna berinteraksi dengan aplikasi dan mengakses kefungsiannya.

Menjelang akhir tutorial ini, anda akan dapat membina komponen dalam Angular. Lebih-lebih lagi, anda akan memahami setiap langkah.

Komponen akan tersedia dalam mana-mana projek Angular dari hari pertama. Dalam satu cara, anda boleh menganggap mana-mana projek Angular sebagai pokok yang terdiri daripada banyak komponen yang bersambung. Setiap komponen mempunyai fungsi tertentu dan templat yang menjadikannya. Satu templat boleh digunakan semula dalam berbilang komponen. Koleksi komponen membentuk aplikasi Sudut, yang akhirnya dilihat dalam penyemak imbas.

Sesuatu komponen adalah seperti kelas yang merangkumi kelakuan sesuatu elemen dan pandangannya. Gelagat termasuk data yang dimuatkan atau diberikan dan cara pengguna berinteraksi dengannya, dan pandangannya ialah templat yang menentukan cara data itu dipersembahkan.

Bina Komponen Kalkulator

Mari kita memahami komponen dengan mencipta komponen Sudut untuk menambah dua nombor. Kami tidak akan membuat komponen langkah demi langkah dalam tutorial ini, tetapi anda boleh mendapatkan kod lengkap untuk aplikasi ini dalam repositori GitHub kami.

Gunakan penghias Component untuk menentukan komponen

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 属性使用内联样式。但如果代码具有大量样式，则需要将其分离到不同的文件中。

请注意，styleUrlComponent penghias digunakan untuk menentukan komponen dalam Angular. Metadata yang mentakrifkan komponen adalah seperti berikut:

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

🎜Dalam takrifan di atas, pemilih memberitahu aplikasi elemen HTML aplikasi yang mana komponen itu perlu digunakan. templateUrl memberitahu aplikasi perkara yang boleh diberikan. Semua yang lain dalam penghias di atas adalah pilihan. 🎜

Apakah pemilih?

🎜pemilih ialah atribut penting dalam Angular. Ia membantu aplikasi menentukan tempat untuk meletakkan komponen. Pemilih sentiasa rentetan. Pemilih boleh ditakrifkan dalam tiga cara berbeza, setiap satu dengan kes penggunaan yang unik: 🎜 🎜 🎜 selector: 'calculator' Boleh digunakan apabila komponen akan ditentukan sebagai elemen <calculator></calculator> dalam HTML. 🎜 🎜 selector: '.calculator' Jika komponen ingin digunakan sebagai elemen CSS, anda boleh menggunakan dalam HTML. 🎜 🎜 selector: '[calculator]' boleh digunakan apabila komponen harus digunakan sebagai sifat, ia kelihatan seperti .🎜 🎜 🎜Pemilih boleh menjadi mudah atau rumit, tetapi peraturan emasnya ialah memastikan pemilih anda semudah mungkin. 🎜

Apakah templat?

🎜templateUrl digunakan untuk mengenal pasti templat yang akan digunakan oleh komponen. Laluan ke templat hendaklah relatif. Untuk templat dalam folder yang sama dengan kod sumber komponen, anda boleh menggunakan templateUrl: './calculator.html' atau templateUrl: 'calculator.html'. 🎜 Jangan gunakan URL mutlak untuk fail HTML pada pelayan. Jika anda melakukan ini, aplikasi tidak akan disusun. kenapa? Angular 2+ sentiasa menyusun semula kod dan memastikan templat diselaraskan semasa proses binaan. 🎜Anda juga mempunyai pilihan untuk menggunakan pilihan template untuk menggantikan pilihan templateUrl dengan templat sebaris. Ini berguna dalam komponen mudah di mana kod TypeScript dan HTML tidak perlu berada dalam fail yang berbeza. 🎜 🎜Pendekatan ini tidak mempunyai kesan ke atas permohonan akhir. kenapa? Tidak kira kaedah yang digunakan, satu berkas akan dijana. 🎜

Apakah itu styleUrl?

🎜Komponen tidak pernah mudah; ia sentiasa penuh dengan gaya. Atribut styleUrl digunakan untuk membantu anda memasukkan CSS khusus komponen. Sama seperti templat, anda boleh menggunakan gaya sebaris melalui atribut styles. Tetapi jika kod itu mempunyai banyak gaya, ia perlu dipisahkan ke dalam fail yang berbeza. 🎜 🎜Sila ambil perhatian bahawa styleUrl sentiasa mengambil tatasusunan, jadi anda boleh menambah berbilang helaian gaya. 🎜

样式封装

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

Atas ialah kandungan terperinci Komponen Sudut: Panduan Komprehensif untuk Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!