Angular 英雄編輯器

應用程序如今有了基本的標題。 接下來你要建立一個新的組件來顯示英雄信息而且把這個組件放到應用程序的外殼裏去。

建立英雄組件

使用 Angular CLI 建立一個名爲 heroes 的新組件。

ng generate component heroes

CLI 建立了一個新的文件夾， src/app/heroes/，並生成了 HeroesComponent 的 4 個文件。

HeroesComponent 的類文件以下：

heroes.component.ts

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() {   }   }

你要從 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 屬性的數據綁定。

heroes.component.html

{{hero}}

顯示 HeroesComponent 視圖

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

別忘了，app-heroes 就是 HeroesComponent 的 元素選擇器(element selector)。 因此，只要把 <app-heroes> 元素添加到 AppComponent 的模板文件（app.component.html）中就能夠了，就放在標題下方。

app.component.html

<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;   name: string; }

回到 HeroesComponent 類，而且導入這個 Hero 類。

把組件的 hero 屬性的類型重構爲 Hero。 而後以 1 爲 id、以 「Windstorm」 爲名字初始化它。

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

src/app/heroes/heroes.component.ts

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() {   }   }

頁面顯示變得不正常了，由於你剛剛把 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 模板）

<div>   <label>name:     <input [(ngModel)]="hero.name" placeholder="name"/>   </label> </div>

[(ngModel)] 是 Angular 的雙向數據綁定句法。

這裏把 hero.name 屬性綁定到了 HTML 的 textbox 元素上，以便數據流能夠雙向流動：從 hero.name 屬性流動到 textbox，而且從 textbox 流回到 hero.name 。

缺乏 FormsModule

注意，當你加上 [(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

對應的文件列表和代碼連接以下：

文件名	源代碼
src/app/heroes/heroes.component.ts	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.ts
src/app/heroes/heroes.component.html	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.html
src/app/app.module.ts	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.module.ts
src/app/app.component.ts	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.ts
src/app/app.component.html	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.html
src/app/hero.ts	https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/hero.ts

小結

• 你使用 CLI 建立了第二個組件 HeroesComponent。
• 你把 HeroesComponent 添加到了殼組件 AppComponent 中，以便顯示它。
• 你使用 UppercasePipe 來格式化英雄的名字。
• 你用 ngModel 指令實現了雙向數據綁定。
• 你知道了 AppModule。
• 你把 FormsModule 導入了 AppModule，以便 Angular 能識別並應用 ngModel 指令。
• 你知道了把組件聲明到 AppModule 是很重要的，並認識到 CLI 會自動幫你聲明它。

https://www.cwiki.us/display/AngularZH/The+Hero+Editor