淺談Angular中組件（@Component）基本知識

本篇文章跟大家介紹一下Angular中元件（@Component）基本知識。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

環境:

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

##1. 概述

元件是Angular 應用的主要建構塊。每個元件包括以下部分：

一個HTML 模板，用於宣告頁面要渲染的內容
• 一個用於定義行為的Typescript 類別
• 一個CSS選擇器，用於定義元件在模板中的使用方式
• （可選）要應用在模板上的CSS 樣式

Component可以是一個頁面，也可以是一個組件（控制）。總是，是一個頁面元素。 【相關教學推薦：《

angular教學》】

任何一個Component都是NgModule的一部分，這樣它就可以被其他應用和其他Component所呼叫。為了定義Component是NgModule的一個成員之一，開發者應該在NgModule的declarations屬性中，將自己開發的Component列出。

另外，透過Component修飾符（也就是@Component）開發者可以配置元數據，這樣透過各式各樣的Life-Cycle hooks，Components就可以控制他們的運作環境。

2. 建立Component

基於AngularCLI，可以很方便的建立Component。在要建立Component的目錄下，執行下列指令

ng generate component <component-name></component-name>

e.g.

ng generate component MyComponent AngularCLI會自動產生一個資料夾和4個檔案：

#一個以該元件命名的資料夾（e.g my-component)
• 一個元件檔案.component.ts（e.g my-component.component.ts)
一個範本文件.component.html（e.g my-component.component.html)
• 一個CSS 文件， .component.css（e.g my-component.component.css)
• 測試檔案.component.spec.ts（e.g my-component.component.spec.ts)

對於Component，所有檔案名稱都會自動增加Component後綴，所以不建議 中帶有'component'這個單字。

@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檔案如果需要可以多個component公用。尤其是css，可以看到參數是Array，所以可以製定多個css。

2.1. 元件模板

#元件模板，即HTML部分，可以是html文件，也可以是一段html描述，是等價的。 Angular 元件需要一個用 template 或 templateUrl 定義的模板。但你不能在元件中同時擁有這兩個語句。

1、html 檔案方式

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

2、html程式碼方式

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

##3.視圖封裝模式

在Angular 中，元件的CSS 樣式被封裝進了自己的視圖中，而不希望影響到應用程式的其它部分。這部分也是可以透過配置去控制的。

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

可以看到，增加了一個encapsulation

屬性 （視圖封裝模式）。透過在元件的元資料上設定視圖封裝模式，你可以分別控制每個元件的封裝模式。可選的封裝模式一共有以下幾種：

1. Emulated 模式（預設值）透過預處理（並改名）CSS 程式碼來模擬Shadow DOM 的行為，以達到把CSS 樣式局限在元件視圖中的目的。更多信息，請參閱附錄 1。 (說明：只進不出，全域樣式能進來，元件樣式出不去)
2. ShadowDom 模式使用瀏覽器原生的 Shadow DOM 實作來為元件的宿主元素附加一個 Shadow DOM。元件的視圖附加到這個 Shadow DOM 中，元件的樣式也被包含在這個 Shadow DOM 中。 (說明：不進不出，沒有樣式能進來，元件樣式出不去。)
3. None 表示 Angular 不使用視圖封裝。 Angular 會將 CSS 加入到全域樣式中。而不會應用上前面討論過的那些作用域規則、隔離和保護等。從本質上來說，這跟把元件的樣式直接放進 HTML 是一樣的。

3.1. 特殊的選擇器:host

使用:host 偽類別選擇器，用來選擇元件宿主元素中的元素（相對於組件模板內部的元素）。 :host 選擇是把宿主元素當作目標的唯一方式。除此之外，你將沒辦法指定它， 因為宿主不是元件自身模板的一部分，而是父元件模板的一部分。

e.g.###

:host {
}

3.2. inline-styles

默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：ng generate component MyComponent --inline-style。

生成component如下

@Component({
  selector: 'app-my-component',
  template: &#39;<h1 id="Hello-nbsp-World">Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

4. 总结

• Angular CLI辅助创建一个component所需的多个文件
• 建议html/css/ts分开
• 在期望目录下执行Angular CLI命令，可以生成到制定目录
• ng generate component XXX 可以简写为 ng g c

更多编程相关知识，请访问：编程视频！！

以上是淺談Angular中組件（@Component）基本知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！