Angular入門到精通系列教程（7）- 組件（@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可以是一個頁面，也可以是一個組件（控制項）。總是，是一個頁面元素。
任何一個Component都是NgModule的一部分，這樣它就可以被其他應用和其他Component所調用。為了定義Component是NgModule的一個成員之一，開發者應該在NgModule的declarations屬性中，將自己開發的Component列出。
另外，通過Component修飾符（也就是@Component）開發者可以配置元數據，這樣通過各式各樣的Life-Cycle hooks，Components就可以控制他們的運行環境。
2. 創建Component
基於AngularCLI，可以很方便的創建Component。在要創建Component的目錄下，執行如下命令
ng generate component <component-name>
e.g. ng generate component MyComponent
AngularCLI會自動生成一個文件夾和4個文件：
- 一個以該組件命名的文件夾（e.g my-component)
- 一個組件文件 < component-name >.component.ts（e.g my-component.component.ts)
- 一個模板文件 < component-name >.component.html（e.g my-component.component.html)
- 一個 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』這個單詞。
@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 定義的模板。但你不能在組件中同時擁有這兩個語句。
- html 文件方式
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
- html程式碼方式
@Component({
selector: 'app-component-overview',
template: '<h1>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屬性 （視圖封裝模式）。通過在組件的元數據上設置視圖封裝模式，你可以分別控制每個組件的封裝模式。 可選的封裝模式一共有如下幾種：
- Emulated 模式（默認值）通過預處理（並改名）CSS 程式碼來模擬 Shadow DOM 的行為，以達到把 CSS 樣式局限在組件視圖中的目的。 更多資訊，見附錄 1。(說明：只進不出，全局樣式能進來，組件樣式出不去)
- ShadowDom 模式使用瀏覽器原生的 Shadow DOM 實現來為組件的宿主元素附加一個 Shadow DOM。組件的視圖被附加到這個 Shadow DOM 中，組件的樣式也被包含在這個 Shadow DOM 中。(說明：不進不出，沒有樣式能進來，組件樣式出不去。)
- 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: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})
4. 總結
- Angular CLI輔助創建一個component所需的多個文件
- 建議html/css/ts分開
- 在期望目錄下執行Angular CLI命令，可以生成到制定目錄
ng generate component XXX可以簡寫為ng g c
—————- END —————-
======================
