本篇文章給大家介紹一下Angular中組件（@Component）基本知識(shí)。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

環(huán)境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 概述

組件是 Angular 應(yīng)用的主要構(gòu)造塊。每個(gè)組件包括如下部分：

• 一個(gè) HTML 模板，用于聲明頁(yè)面要渲染的內(nèi)容
• 一個(gè)用于定義行為的 Typescript 類
• 一個(gè) CSS 選擇器，用于定義組件在模板中的使用方式
• （可選）要應(yīng)用在模板上的 CSS 樣式

Component可以是一個(gè)頁(yè)面，也可以是一個(gè)組件（控件）?？偸?，是一個(gè)頁(yè)面元素?！鞠嚓P(guān)教程推薦：《angular教程》】

任何一個(gè)Component都是NgModule的一部分，這樣它就可以被其他應(yīng)用和其他Component所調(diào)用。為了定義Component是NgModule的一個(gè)成員之一，開發(fā)者應(yīng)該在NgModule的declarations屬性中，將自己開發(fā)的Component列出。

另外，通過(guò)Component修飾符（也就是@Component）開發(fā)者可以配置元數(shù)據(jù)，這樣通過(guò)各式各樣的Life-Cycle hooks，Components就可以控制他們的運(yùn)行環(huán)境。

2. 創(chuàng)建Component

基于AngularCLI，可以很方便的創(chuàng)建Component。在要?jiǎng)?chuàng)建Component的目錄下，執(zhí)行如下命令

ng generate component <component-name>

e.g. ng generate component MyComponent
AngularCLI會(huì)自動(dòng)生成一個(gè)文件夾和4個(gè)文件：

• 一個(gè)以該組件命名的文件夾（e.g my-component)
• 一個(gè)組件文件 < component-name >.component.ts（e.g my-component.component.ts)
• 一個(gè)模板文件 < component-name >.component.html（e.g my-component.component.html)
• 一個(gè) CSS 文件， < component-name >.component.css（e.g my-component.component.css)
• 測(cè)試文件 < component-name >.component.spec.ts（e.g my-component.component.spec.ts)

對(duì)于Component，所有文件名都會(huì)自動(dòng)增加Component后綴，所以不建議< component-name > 中帶有‘component’這個(gè)單詞。

@Component({   selector: 'app-my-component',   templateUrl: './my-component.component.html',   styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit {    constructor() { }    ngOnInit(): void {   }  }

以上是核心的ts文件，指定了selector(CSS 選擇器)，template（html）文件，css文件。html/css文件如果需要可以多個(gè)component公用。尤其是css，可以看到參數(shù)是Array，所以可以制定多個(gè)css。

2.1. 組件模板

組件模板，即HTML部分，可以是一個(gè)html文件，也可以是一段html描述，是等價(jià)的。Angular 組件需要一個(gè)用 template 或 templateUrl 定義的模板。但你不能在組件中同時(shí)擁有這兩個(gè)語(yǔ)句。

1、html 文件方式

@Component({   selector: 'app-component-overview',   templateUrl: './component-overview.component.html', })

2、html代碼方式

@Component({   selector: 'app-component-overview',   template: '<h1>Hello World!</h1>', })

3. 視圖封裝模式

在 Angular 中，組件的 CSS 樣式被封裝進(jìn)了自己的視圖中，而不希望影響到應(yīng)用程序的其它部分。這部分也是可以通過(guò)配置去進(jìn)行控制的。

@Component({   selector: 'app-my-component',   templateUrl: './my-component.component.html',   encapsulation: ViewEncapsulation.None,   styleUrls: ['./my-component.component.css'] })

可以看到，增加了一個(gè)encapsulation屬性 （視圖封裝模式）。通過(guò)在組件的元數(shù)據(jù)上設(shè)置視圖封裝模式，你可以分別控制每個(gè)組件的封裝模式。 可選的封裝模式一共有如下幾種：

1. Emulated 模式（默認(rèn)值）通過(guò)預(yù)處理（并改名）CSS 代碼來(lái)模擬 Shadow DOM 的行為，以達(dá)到把 CSS 樣式局限在組件視圖中的目的。