本文內容

閱讀官方文件 Angular Components Overview 的筆記內容。

Component 的簡介

Angular 專案大致上都是由各個大大小小的元件所組成的。
在每一個元件中大致上都是有以下的內容所組成的

1. HTML template 定義該元件會有什麼內容會被渲染到頁面上
2. TypeScript 檔案定義該元件的行為
3. CSS selector 定義該元件要怎麼被加到其他的 template 中。
4. CSS 樣式檔，這個檔案是可以選擇不定義它的，主要定義該元件的 CSS 樣式。

創出一個 Angular 的元件

Angular CLI 狀態下創出新的元件

如果，你是在 Angular CLI 的專案狀態下要新創一個元件的話，是非常簡單的喔，
你只要在終端機為該專案輸入以下指令 ng generate component <component-name> ，
或者輸入簡寫指令 ng g c <component-name>，兩者的效果都一樣，會在你的專案中產出一個 component-name 的元件資料夾，可以在這個元件資料夾底下看到以下的檔案

1. <component-name>.component.ts: 用來定義該元件的行為
2. <component-name>.component.html : 用來定義該元件的 html 內容
3. <component-name>.component.css: 定義該元件的 css 樣式
4. <component-name>.component.spec.ts: 用來撰寫這個元件的測試設定

手動創出新的元件

在官方文件中 有完整的教學步驟，步驟不多，所以，筆者這邊就先不贅述了。

指定元件的 CSS selector 名稱

我們會在元件的 ts 檔案中定義它的 css selector 名稱，之後，我們將這個 css selector 加到其他 html 檔案中的時候，Angular 可以藉由這個 css seletor 要知道去哪個元件檔案中去取得它的 html 樣板內容。
它的位置會出現在元件的 ts 檔案的以下這個位置，而 selector 屬性內容就是這個元件的 css selector 名稱。
[TypeScript]

@Component({
  selector: 'app-product-list',
})

定義元件的 html 樣板

元件中的 html 樣板檔案定義的內容，就是告訴 Angular 應該要將什麼內容渲染到畫面上。
而定義元件的 html 樣板檔案有兩種方式:

1. 參照一個外部的檔案
2. 直接寫在檔案中

方法一: 我們來寫一個參照外部檔案的範例
[TypeScript]

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

以上的範例，就會去參照跟這個檔案相同層級資料夾中的一個叫做 product-list.component.html 的檔案，作為這個元件的 html 樣板檔案。

方法二: 我們寫一個直接寫在檔案裡面的範例
[TypeScript]

@Component({
  selector: 'app-product-list',
  template: '<h1>This is A product component H1</h1>',
})

若 html 樣板內容是多行的話加入 backticks 來寫

上面的範例，我們只有寫一行 html template 的內容，如果，我們要寫多行的話，按照上面用單引號(')把內容包起來的寫法，就必須還要注意要將多行的內容的字串整併起來的問題。
所以，在官方文件中就有建議我們直接用 backticks 來將多行 html template 內容包起來

@Component({
  selector: 'app-product-list',
  template: `
    <h1>This is A product component H1</h1>
    <p> This is a paragraph </p>     
  `
})

Note:
不知道你有沒有注意到，如果是參照外部 html 檔案的時候，屬性是 templateUrl，如果，是直接在元件檔案裡面定義 html 內容的話，屬性是 template。
另外，在元件的檔案裡面只能出現 templateUrl 或 template，不能同時出現在同一個元件檔案中。

定義元件的 css 樣式

元件的 css 樣式的指定方式，跟 html 樣板的指定方式一樣，有兩種一種是指定外部的 css 樣式檔案，另一種就是直接在元件的檔案裡面定義。

方法一: 指定外部的 css 樣式檔案

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

可以看到上面的 styleUrls 屬性裡面就是放著指定的 css 檔案。
眼尖的大家，應該都有注意到 styleUrls 是用陣列的型式，將要引入的 css 樣式檔案放在裡面，這代表了什麼呢?!!
代表我們可以引入一個以上的 css 樣式檔，寫法如下

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css', './ramble-style.css']
})

上面我們再加入一個叫 ramble-style.css 的檔案到我們的元件的 css 引入檔案中，這代表了這個元件會同時引入 product-list.css 和 ramble-style.css 這兩個樣式的檔案內容。

方法二: 直接將樣式設定寫在檔案中

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styles: ['.practice { color:red;} div{ border: 1px solid black;}']
})

寫法差不多，就是在 styles 屬性裡面寫入一個陣列，裡面就直接放這個元件檔案會用到的 css 樣式。

Note:
一樣要注意的地方是，當引入外部指定的 css 樣式檔案的時候，它是接在 styleUrls 後面，而直接將 css 樣式寫在元件檔案中的話，是接在 styles 屬性的後面。這兩者的不同要稍微注意一下喔~~

Summary

ok~ 這邊來做個總結吧

1. 我們可以在 Angular CLI 的狀態下，利用指令 ng g c <component-name> 來創出一個新的元件。
2. 元件的檔案大致上都會擁有以下四種檔案: component.html, component.ts, component.css, component.spec.ts
3. 元件在 html 樣板和 css 樣式的定義上，都有兩種辦法，分別是指定外部某個檔案，另一個是直接寫在元件的檔案裡面。
4. 要特別注意外部引入 html, css 檔案和直接寫在元件檔案中，所使用的屬性是不一樣的(templateUrl, template, styleUrls, styles)。