應用程式現在有了基本的標題。 接下來你要建立一個新的元件來顯示英雄資訊並且把這個元件放到應用程式的外殼裡去。

建立英雄元件

使用 Angular CLI 建立一個名為 heroes 的新元件。

ng generate component heroes

CLI 建立了一個新的資料夾， src/app/heroes/，並生成了 HeroesComponent 的 4 個檔案。

HeroesComponent 的類檔案如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
 

你要從 Angular 核心庫中匯入Component符號，併為元件類加上@Component註解。

@Component 是一個修飾器函式，這個函式為元件指定了 Angular 元資料。

CLI 自動生成了三個元資料屬性：

1. selector — 元件的 CSS 元素選擇器。
2. templateUrl — 元件模板檔案的位置。
3. styleUrls —元件私有 CSS 樣式表文件的位置。

CSS 元素選擇器 app-heroes 用來在父元件的模板中匹配 HTML 元素的名稱，以識別出該元件。

ngOnInit 是一個生命週期鉤子（lifecycle hook），Angular 在建立完元件後很快就會呼叫 ngOnInit

始終要 export 這個元件類，以便於在其它地方（比如 AppModule）匯入它。

新增一個hero屬性

往 HeroesComponent 中新增一個 hero 屬性，用來表示一個名叫 “Windstorm” 的英雄。

hero = 'Windstorm';

顯示英雄

開啟模板檔案 heroes.component.html。刪除 Angular CLI 自動生成的預設內容，改為到 hero 屬性的資料繫結。

顯示HeroesComponent檢視

要顯示 HeroesComponent 你必須把它加到殼元件 AppComponent 的模板中。

別忘了，app-heroes

<h1>{{title}}</h1>
<app-heroes></app-heroes>

如果 CLI 的 ng serve 命令仍在執行，瀏覽器就會自動重新整理，並且同時顯示出應用的標題和英雄的名字。

建立一個 Hero 類

真實的英雄當然不僅僅只有一個名字。

在 src/app 資料夾中為 Hero 類建立一個檔案，並新增 id 和 name 屬性。

src/app/hero.ts

export class Hero {
  id: number | undefined;
  name: string | undefined;
}

回到 HeroesComponent 類，並且匯入這個 Hero 類。

把元件的 hero 屬性的型別重構為 Hero。 然後以 1 為 id、以 “Windstorm” 為名字初始化它。

修改後的 HeroesComponent 類應該是這樣的：

import {Component, OnInit} from '@angular/core';
import {Hero} from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() {
  }

  ngOnInit(): void {
  }

}

頁面顯示變得不正常了，因為你剛剛把 hero 從字串改成了物件。

顯示hero物件

修改模板中的繫結，以顯示英雄的名字，並在詳情中顯示 id 和 name，就像這樣：

heroes.component.html (HeroesComponent 的模板)

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

瀏覽器自動重新整理，並顯示這位英雄的資訊。

使用UppercasePipe進行格式化

把 hero.name 的繫結修改成這樣：

<h2>{{hero.name | uppercase}} Details</h2>

對瀏覽器進行重新整理。現在，你會發現英雄的名字顯示成了大寫字母。

位於管道操作符（ | ）的右邊的單詞 uppercase 表示的是一個插值繫結，用於呼叫內建的 UppercasePipe。

管道（Pipes） 是格式化字串、金額、日期和其它顯示資料的好辦法。 Angular 釋出了一些內建管道，當然你還可以建立自己的管道。

編輯英雄

使用者應該能在一個 <input> 文字輸入框（textbox）中編輯英雄的名字。

當用戶輸入時，這個輸入框應該能同時顯示和修改英雄的 name 屬性。 也就是說，資料流從元件類流出到螢幕，並且從螢幕流回到元件類。

要想讓這種資料流動自動化，就要在表單元素 <input> 和元件的 hero.name 屬性之間建立雙向資料繫結。

雙向繫結

把 HeroesComponent 模板中的英雄詳情區重構成這樣：

src/app/heroes/heroes.component.html （HeroesComponent 模板）

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name"></input>
  </label>
</div>

缺少FormsModule

注意，當你加上 [([ngModel](https://angular.io/api/forms/NgModel))]之後這個應用無法工作了。

開啟瀏覽器的開發工具，就會在控制檯中看到如下資訊：

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

雖然 ngModel 是一個有效的 Angular 指令，不過它在預設情況下是不可用的。

它屬於一個可選模組 FormsModule，你必須自行新增此模組才能使用該指令。

AppModule

Angular 需要知道如何把應用程式的各個部分組合到一起，以及該應用需要哪些其它檔案和庫。 這些資訊被稱為元資料（metadata）。

最重要的 @NgModule 裝飾器位於頂級類 AppModule 上。

Angular CLI 在建立專案的時候就在 src/app/app.module.ts 中生成了一個 AppModule 類。 這裡也就是你要新增 FormsModule 的地方。

匯入 FormsModule

開啟 AppModule (app.module.ts) 並從 @angular/forms 庫中匯入 FormsModule 符號。

app.module.ts (FormsModule 符號匯入)

import {FormsModule} from '@angular/forms';

然後把 FormsModule 新增到 @NgModule 元資料的 imports 陣列中，這裡是該應用所需外部模組的列表。

app.module.ts（@NgModule 匯入）

imports: [
 BrowserModule,
 FormsModule
],

重新整理瀏覽器，應用又能正常工作了。你可以編輯英雄的名字，並且會看到這個改動立刻體現在這個輸入框上方的 <h2> 中。

宣告HeroesComponent

每個元件都必須宣告在（且只能宣告在）一個 NgModule 中。

你沒有宣告過 HeroesComponent，可為什麼應用卻正常工作呢？

這是因為 Angular CLI 在生成 HeroesComponent 元件的時候就自動把它加到了 AppModule 中。

開啟 src/app/app.module.ts 你可以在頂部找到 HeroesComponent 已經被匯入過了。

src/app/app.module.ts

import {HeroesComponent} from './heroes/heroes.component';

HeroesComponent 也已經宣告在了 @NgModule.declarations 陣列中。

declarations: [
  AppComponent,
  HeroesComponent
],

注意：AppModule 聲明瞭應用中的所有元件，AppComponent 和 HeroesComponent。

最終程式碼預覽

應用跑起來應該是這樣的：線上例子 / 下載範例。

如果你想直接在stackblitz 執行本頁中的例子，請單擊連結：https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

本頁中所提及的程式碼如下：https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

對應的檔案列表和程式碼連結如下：

最終程式碼預覽

應用跑起來應該是這樣的：線上例子 / 下載範例。

如果你想直接在stackblitz 執行本頁中的例子，請單擊連結：Cwiki-us-angular - Cwiki Us Angular Tour Of Hero Editor - StackBlitz

本頁中所提及的程式碼如下：https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

對應的檔案列表和程式碼連結如下：

小結

• 你使用 CLI 建立了第二個元件 HeroesComponent。
• 你把 HeroesComponent 新增到了殼元件 AppComponent 中，以便顯示它。
• 你使用 UppercasePipe 來格式化英雄的名字。
• 你用 [ngModel](https://angular.ossez.com/api/forms/NgModel) 指令實現了雙向資料繫結。
• 你知道了 AppModule。
• 你把 [FormsModule](https://angular.ossez.com/api/forms/FormsModule) 匯入了 AppModule，以便 Angular 能識別並應用 [ngModel](https://angular.ossez.com/api/forms/NgModel) 指令。
• 你知道了把元件宣告到 AppModule 是很重要的，並認識到 CLI 會自動幫你宣告它。