Angular中組件@Component的示例分析

這篇文章主要介紹Angular中組件@Component的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1. 概述

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

• 一個(gè) HTML 模板，用于聲明頁面要渲染的內(nèi)容

• 一個(gè)用于定義行為的 Typescript 類

• 一個(gè) CSS 選擇器，用于定義組件在模板中的使用方式

• （可選）要應(yīng)用在模板上的 CSS 樣式

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

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

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

2. 創(chuàng)建Component

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

ng generate component <component-name>

e.g. ng generate component MyComponent
AngularCLI會自動生成一個(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)

• 測試文件 < component-name >.component.spec.ts（e.g my-component.component.spec.ts)

對于Component，所有文件名都會自動增加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è)語句。

1、html 文件方式

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

2、html代碼方式

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

3. 視圖封裝模式

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

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

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

1. Emulated 模式（默認(rèn)值）通過預(yù)處理（并改名）CSS 代碼來模擬 Shadow DOM 的行為，以達(dá)到把 CSS 樣式局限在組件視圖中的目的。 更多信息，見附錄 1。(說明：只進(jìn)不出，全局樣式能進(jìn)來，組件樣式出不去)

2. ShadowDom 模式使用瀏覽器原生的 Shadow DOM 實(shí)現(xiàn)來為組件的宿主元素附加一個(gè) Shadow DOM。組件的視圖被附加到這個(gè) Shadow DOM 中，組件的樣式也被包含在這個(gè) Shadow DOM 中。(說明：不進(jìn)不出，沒有樣式能進(jìn)來，組件樣式出不去。)

3. None 意味著 Angular 不使用視圖封裝。 Angular 會把 CSS 添加到全局樣式中。而不會應(yīng)用上前面討論過的那些作用域規(guī)則、隔離和保護(hù)等。 從本質(zhì)上來說，這跟把組件的樣式直接放進(jìn) HTML 是一樣的。

3.1. 特殊的選擇器 :host

使用 :host 偽類選擇器，用來選擇組件宿主元素中的元素（相對于組件模板內(nèi)部的元素）。 :host 選擇是是把宿主元素作為目標(biāo)的唯一方式。除此之外，你將沒辦法指定它， 因?yàn)樗拗鞑皇墙M件自身模板的一部分，而是父組件模板的一部分。

e.g.

:host {
}

3.2. inline-styles

默認(rèn)AngularCLI生成的component，css在一個(gè)單獨(dú)文件中。當(dāng)然，同html模板類似，如果需要，你也可以制定css樣式寫在ts中， 不單獨(dú)放到一個(gè)文件中。命令：ng generate component MyComponent --inline-style。

生成component如下

@Component({
  selector: 'app-my-component',
  template: '<h2>Hello World!</h2>',
  styles: ['h2 { font-weight: normal; }']
})

4. 總結(jié)

• Angular CLI輔助創(chuàng)建一個(gè)component所需的多個(gè)文件

• 建議html/css/ts分開

• 在期望目錄下執(zhí)行Angular CLI命令，可以生成到制定目錄

• ng generate component XXX 可以簡寫為 ng g c

以上是“Angular中組件@Component的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！