應(yīng)用程序現(xiàn)在有了基本的標(biāo)題。 接下來你要?jiǎng)?chuàng)建一個(gè)新的組件來顯示英雄信息并且把這個(gè)組件放到應(yīng)用程序的外殼里去胆剧。
創(chuàng)建英雄組件
使用 Angular CLI 創(chuàng)建一個(gè)名為heroes的新組件旱物。
ng generate component heroes
CLI 創(chuàng)建了一個(gè)新的文件夾遥缕，src/app/heroes/，并生成了HeroesComponent的 4 個(gè)文件宵呛。
HeroesComponent的類文件如下：
heroes.component.ts
import{ Component, OnInit } from?'@angular/core';
@Component({
??selector:?'app-heroes',
??templateUrl:?'./heroes.component.html',
??styleUrls: ['./heroes.component.css']
})
export?classHeroesComponent?implementsOnInit {
??constructor() { }
??ngOnInit() {
??}
}
你要從 Angular 核心庫中導(dǎo)入
符號单匣，并為組件類加上@
注解。
@Component是一個(gè)修飾器函數(shù)，這個(gè)函數(shù)為組件指定了 Angular 元數(shù)據(jù)户秤。
CLI 自動(dòng)生成了三個(gè)元數(shù)據(jù)屬性：
selector?— 組件的 CSS 元素選擇器码秉。
templateUrl?— 組件模板文件的位置。
styleUrls?—?組件私有 CSS 樣式表文件的位置鸡号。
CSS 元素選擇器app-heroes用來在父組件的模板中匹配 HTML 元素的名稱转砖，以識別出該組件。
ngOnInit是一個(gè)生命周期鉤子（lifecycle hook）鲸伴，Angular 在創(chuàng)建完組件后很快就會(huì)調(diào)用ngOnInit府蔗。這里是放置初始化邏輯的好地方。
始終要export這個(gè)組件類汞窗，以便于在其它地方（比如AppModule）導(dǎo)入它姓赤。
添加一個(gè)hero屬性
往HeroesComponent中添加一個(gè)hero屬性，用來表示一個(gè)名叫 “Windstorm” 的英雄杉辙。
hero =?'Windstorm';
顯示英雄
打開模板文件heroes.component.html模捂。刪除 Angular CLI 自動(dòng)生成的默認(rèn)內(nèi)容，改為到hero屬性的數(shù)據(jù)綁定蜘矢。
heroes.component.html
{{hero}}
顯示HeroesComponent視圖
要顯示HeroesComponent你必須把它加到殼組件AppComponent的模板中。
別忘了综看，app-heroes就是HeroesComponent的元素選擇器(element selector)品腹。 所以，只要把<app-heroes>元素添加到AppComponent的模板文件（app.component.html）中就可以了红碑，就放在標(biāo)題下方舞吭。
app.component.html
<h1>{{title}}</h1>
<app-heroes></app-heroes>
如果 CLI 的ng serve命令仍在運(yùn)行，瀏覽器就會(huì)自動(dòng)刷新析珊，并且同時(shí)顯示出應(yīng)用的標(biāo)題和英雄的名字羡鸥。
創(chuàng)建一個(gè) Hero 類
真實(shí)的英雄當(dāng)然不僅僅只有一個(gè)名字。
在src/app文件夾中為Hero類創(chuàng)建一個(gè)文件忠寻，并添加id和name屬性惧浴。
src/app/hero.ts
export?classHero {
??id: number;
??name: string;
}
回到HeroesComponent類，并且導(dǎo)入這個(gè)Hero類奕剃。
把組件的hero屬性的類型重構(gòu)為Hero衷旅。 然后以1為id、以 “Windstorm” 為名字初始化它纵朋。
修改后的HeroesComponent類應(yīng)該是這樣的：
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?classHeroesComponent?implementsOnInit {
??hero: Hero = {
????id:?1,
????name:?'Windstorm'
??};
??constructor() {
??}
??ngOnInit() {
??}
}
頁面顯示變得不正常了柿顶，因?yàn)槟銊倓偘裩ero從字符串改成了對象。
顯示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>
瀏覽器自動(dòng)刷新，并顯示這位英雄的信息家乘。
使用UppercasePipe進(jìn)行格式化
把hero.name的綁定修改成這樣：
<h2>{{hero.name | uppercase}} Details</h2>
對瀏覽器進(jìn)行刷新∑飞剑現(xiàn)在，你會(huì)發(fā)現(xiàn)英雄的名字顯示成了大寫字母烤低。
位于管道操作符（ | ）的右邊的單詞uppercase表示的是一個(gè)插值綁定肘交，用于調(diào)用內(nèi)置的UppercasePipe。
管道（Pipes）是格式化字符串扑馁、金額涯呻、日期和其它顯示數(shù)據(jù)的好辦法。 Angular 發(fā)布了一些內(nèi)置管道腻要，當(dāng)然你還可以創(chuàng)建自己的管道复罐。
編輯英雄
用戶應(yīng)該能在一個(gè)<input>文本輸入框（textbox）中編輯英雄的名字。
當(dāng)用戶輸入時(shí)雄家，這個(gè)輸入框應(yīng)該能同時(shí)顯示和修改英雄的name屬性效诅。 也就是說，數(shù)據(jù)流從組件類流出到屏幕趟济，并且從屏幕流回到組件類乱投。
要想讓這種數(shù)據(jù)流動(dòng)自動(dòng)化，就要在表單元素<input>和組件的hero.name屬性之間建立雙向數(shù)據(jù)綁定顷编。
雙向綁定
把HeroesComponent?模板中的英雄詳情區(qū)重構(gòu)成這樣：
src/app/heroes/heroes.component.html （HeroesComponent 模板）
<div>
??<label>name:
????<input [(ngModel)]="hero.name"placeholder="name"/>
??</label>
</div>
[(ngModel)]是 Angular 的雙向數(shù)據(jù)綁定句法戚炫。
這里把hero.name屬性綁定到了 HTML 的 textbox 元素上，以便數(shù)據(jù)流可以雙向流動(dòng)：從hero.name屬性流動(dòng)到 textbox媳纬，并且從 textbox 流回到hero.name双肤。
缺少FormsModule
注意，當(dāng)你加上[(ngModel)]?之后這個(gè)應(yīng)用無法工作了钮惠。
打開瀏覽器的開發(fā)工具茅糜，就會(huì)在控制臺(tái)中看到如下信息：
Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of?'input'.
雖然ngModel是一個(gè)有效的 Angular 指令，不過它在默認(rèn)情況下是不可用的素挽。
它屬于一個(gè)可選模塊FormsModule蔑赘，你必須自行添加此模塊才能使用該指令。
AppModule
Angular 需要知道如何把應(yīng)用程序的各個(gè)部分組合到一起毁菱，以及該應(yīng)用需要哪些其它文件和庫米死。 這些信息被稱為元數(shù)據(jù)（metadata）。
最重要的@NgModule裝飾器位于頂級類AppModule上贮庞。
Angular CLI 在創(chuàng)建項(xiàng)目的時(shí)候就在src/app/app.module.ts中生成了一個(gè)AppModule類峦筒。 這里也就是你要添加FormsModule的地方。
導(dǎo)入FormsModule
打開AppModule(app.module.ts) 并從@angular/forms庫中導(dǎo)入FormsModule符號窗慎。
app.module.ts (FormsModule 符號導(dǎo)入)
import{FormsModule} from?'@angular/forms';
然后把FormsModule添加到@NgModule元數(shù)據(jù)的imports數(shù)組中物喷，這里是該應(yīng)用所需外部模塊的列表卤材。
app.module.ts（@NgModule 導(dǎo)入）
imports: [
??BrowserModule,
??FormsModule
],
刷新瀏覽器，應(yīng)用又能正常工作了峦失。你可以編輯英雄的名字扇丛，并且會(huì)看到這個(gè)改動(dòng)立刻體現(xiàn)在這個(gè)輸入框上方的<h2>中。
聲明HeroesComponent
每個(gè)組件都必須聲明在（且只能聲明在）一個(gè)NgModule中尉辑。
你沒有聲明過HeroesComponent帆精，可為什么應(yīng)用卻正常工作呢？
這是因?yàn)?Angular CLI 在生成HeroesComponent組件的時(shí)候就自動(dòng)把它加到了AppModule中隧魄。
打開src/app/app.module.ts你可以在頂部找到HeroesComponent已經(jīng)被導(dǎo)入過了卓练。
src/app/app.module.ts
import{HeroesComponent} from?'./heroes/heroes.component';
HeroesComponent也已經(jīng)聲明在了@NgModule.declarations數(shù)組中。
declarations: [
??AppComponent,
??HeroesComponent
],
注意：AppModule聲明了應(yīng)用中的所有組件购啄，AppComponent和HeroesComponent襟企。
最終代碼預(yù)覽
應(yīng)用跑起來應(yīng)該是這樣的：在線例子/下載范例。
如果你想直接在?stackblitz 運(yùn)行本頁中的例子狮含，請單擊鏈接：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
對應(yīng)的文件列表和代碼鏈接如下：
文件名源代碼
src/app/heroes/heroes.component.tshttps://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.htmlhttps://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.html
src/app/app.module.tshttps://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.module.ts
src/app/app.component.tshttps://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.ts
src/app/app.component.htmlhttps://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.html
src/app/hero.tshttps://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/hero.ts
小結(jié)
你使用 CLI 創(chuàng)建了第二個(gè)組件HeroesComponent顽悼。
你把HeroesComponent添加到了殼組件AppComponent中，以便顯示它几迄。
你使用UppercasePipe來格式化英雄的名字蔚龙。
你用ngModel指令實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。
你知道了AppModule乓旗。
你把FormsModule導(dǎo)入了AppModule府蛇，以便 Angular 能識別并應(yīng)用ngModel指令。
你知道了把組件聲明到AppModule是很重要的屿愚，并認(rèn)識到 CLI 會(huì)自動(dòng)幫你聲明它。
