Angular-第2課-組件的使用
在第1課，我們自動產生了App Component這個組件。這一課要試著建立另一個新組件，放置在App Component當中。此外也會編輯它們，在瀏覽器查看修改後的成果。
課程關鍵字：#組件 #Metadata #插值綁定 #物件類別
一、版面與程式的關係
首先開啟/src/app/app.component.html
在上方的<h1>標籤內，有個「Welcome to {{ title }}!」文字，那就是應用程式啟動時所看到的標題文字。
不過「title」的值從哪裡來呢？請開啟/src/app/app.component.ts
在裡面會看到一個「AppComponent」類別，裡面定義了一個變數title，就是在這裡，而它的值目前是應用程式的名稱。
回到html檔，使用兩個大括號，裡面夾一個變數，是Angular的「插值綁定」語法。這種做法能夠將ts檔（程式檔）中的變數插入到html檔中。
現在試著將title的值改為「Tour of Heroes」並儲存，此時Angular CLI自動重新建置專案，瀏覽器也跟著刷新，我們看到了修正後的標題。
接著開啟/src/app/app.component.css
這個檔案會提供風格樣式給html，但目前是空白的，因此我們將官方文件的範例CSS直接貼進來。
/* Application-wide Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}儲存後，瀏覽器畫面也隨之刷新，變得好看一點了。
做個小結論，對於同一組件，可以在html中使用「插值綁定」語法，將ts中對應的變數給插入進來。而css提供樣式給html，使其更加美觀。
二、新增組件
這一節我們要新建一個組件。首先在終端機切換到專案資料夾的根目錄，也就是src資料夾的上一層。執行下面的命令，新建名為「heroes」的組件。
ng new component 組件名稱ng new component heroes
此時產生了新目錄：/src/app/heroes。這是新組件的檔案存放的地方。一樣有html、css與ts三種檔案。再回顧一下，AppComponent組件是整個應用程式的容器，裡面容納了子組件。而這樣的檔案放置方式也說明了這點。
請開啟這個組件的程式檔：/src/app/heroes/heroes.component.ts
第1行從Angular的核心函式庫匯入了Component這個標記（annotation）和OnInit這個介面。
HeroesComponent類別上面標記了@Component，用來表示這個類別是一個組件。以Spring來比喻，標記@Service就代表那個類別是個業務邏輯層。而在@Component中還定義了一些資料（metadata）：
- selector：在父組件（如AppComponent）的html檔放置本組件時，所要使用的html標籤名稱。下面的小節會再解說。
- templateUrl：這個組件的html檔位置。如同Android的setContentView方法定義了layout檔所在地。
- styleUrls：這個組件的專屬css檔位置。
這個類別實作了ngOnInit介面。「OnInit」是Angular的生命週期，就像Android的onCreate一樣。ngOnInit是組件在執行期間實體化後所執行，通常會把初始化的作業撰寫在這裡。
三、放置組件
這一節我們要將HeroesComponent這個組件，放置到AppComponent中。但在這之前，先修改一下組件的版面和程式。
首先開啟heroes.component.ts，在類別中加入一個變數：
hero = 'Windstorm';接著開啟heroes.component.html，將當前的版面配置清空。並使用上一節介紹的「插值綁定」語法，將程式檔（ts檔）的變數給插入進來。
{{hero}}經過對組件的編輯，此時HeroesComponent就像AppComponent一樣，已經是做好，能被使用的組件了。只是它還沒放置，因此在網頁上不會顯示。
接下來將HeroesComponent放置好。請開啟app.component.html，將內容改為如下：
<h1>{{title}}</h1>
<app-heroes></app-heroes>第1行的title就是在第一節所修改的標題文字。而第2行的<app-heroes>則是在第二節，@Component中所定義的selector。selector的值代表這個組件現在被放置在別的html時，所要使用的標籤名稱。
儲存後畫面刷新，AppComponent只剩下標題，而HeroesComponent確實被放置進來。它們上頭都顯示著在html檔中透過插值綁定而來的文字。
四、物件類別
現今流行的網頁語言都是物件導向，Angular也不例外。這一節我們要使用「物件」的觀念來改寫HeroesComponent組件。
有物件必定會有類別，首先在/src/app中建立「hero.ts」。這是一個程式檔，用來描述hero這個類別，它會有id和name兩種屬性。與Java不同的是，Type Script的資料型態寫在變數名稱後面。
export class Hero {
id: number;
name: string;
}回到heroes.component.ts，先前hero這個變數是被賦予一個字串，現在我們改為賦予一個Hero物件。
hero: Hero = {
id: 1,
name: 'Windstorm'
};雖然直接將程式碼貼上去了，但由於沒有匯入這個類別，因此這個程式不會正常運作，這時可以在上方手動撰寫匯入：
import { Hero } from 'src/app/hero';若有使用VS Code開發工具，可以點擊右邊的小燈泡，選擇匯入hero類別。
匯入後，程式檔已經準備完畢。接下來開啟heroes.component.html，原本hero變數透過插值綁定，插入的是字串，但現在變成插入物件，它是不能直接被顯示的。因此修改html，透過取出物件中的屬性來做顯示。
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>每組大括號都是插入程式檔中的hero物件，並顯示它的屬性。其中第1行的「| uppercase」是將字串轉為英文大寫的「管道操作（pipe operation）」，能用來進行格式化。儲存後即可正常顯示。
做個小結論，這一節我們在組件的程式檔中運用了新的Hero類別。接著在html檔中，將插入的hero物件的屬性值取出來顯示。
