Angular入門到精通系列教程(7)- 元件(@Component)基本知識

Jack Niu發表於2021-01-12

環境:

  • 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 定義的模板。但你不能在元件中同時擁有這兩個語句。

  1. html 檔案方式
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})
  1. 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屬性 (檢視封裝模式)。通過在元件的後設資料上設定檢視封裝模式,你可以分別控制每個元件的封裝模式。 可選的封裝模式一共有如下幾種:

  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: '<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 ----------------






======================

相關文章