如果沒看上一節(jié)的話,建議您看一下(點(diǎn)擊這里)

接著上一節(jié)的問題講:
輸入框名字被修改的時(shí)候,標(biāo)題怎么跟著一塊改變?

這個(gè)時(shí)候要用到Angular里面很重的一個(gè)東東:雙向數(shù)據(jù)綁定
用官網(wǎng)的話叫做 Two-Way Binding

1.找到文件 ?src/app/app.module.ts 并打開編輯
? ? 看一下import 引入模塊 有沒有引入 FromsModule 這個(gè)模塊,
? ? 如果沒有,通過import 來自己引入一下
? ? import {FormsModule} from "@angular/forms";
? ?引入成功之后,在@NgModule 的 imports: 數(shù)組中加入該模塊(圖1)

圖1

接下來,修改 src/app/app.component.ts 中的模板 template 的 hero.name 輸入框,修改結(jié)果如下(圖2):

圖2

2.好了,現(xiàn)在,我們達(dá)到一個(gè)效果: 當(dāng)名字被修改的時(shí)候,其他使用的hero.name的地方,也會(huì)跟著變化,這也正好體現(xiàn)出來了Angular中雙向數(shù)據(jù)綁定的魅力了:
? ? 界面上input 中 hero.name 發(fā)生變化,導(dǎo)致數(shù)據(jù)中hero.name發(fā)生變化,又導(dǎo)致了界面中h2里面hero.name發(fā)生了變化
? ? ?那么接下來再拋出一個(gè)問題: ?有沒有感覺我們的界面太單調(diào)了,界面上只有一個(gè)英雄?
? ? 接下來,我們要?jiǎng)?chuàng)建多個(gè)英雄,讓它們同時(shí)都顯示到界面上,這也是開發(fā)項(xiàng)目時(shí)候,最長用的一個(gè)list控件的生成方式了
? ? ?首先在 src/app/app.component.ts 中通過我們的英雄(Hero)類創(chuàng)建10個(gè)英雄,代碼如圖3所示:

圖3

接下來修改數(shù)據(jù)中的hero和模板的顯示方式
如圖4所示:

圖4

3.代碼改好之后,在瀏覽器的界面上會(huì)發(fā)現(xiàn),我們數(shù)據(jù)中的10個(gè)英雄全部到顯示到界面上了,但是,好像樣式有點(diǎn)單調(diào),沒啥意思,接下來,我們就來修改一下樣式咯:
@Component 這個(gè)東東,不僅可以擁有模板(template)屬性,還可以擁有樣式(styles)屬性:
如下圖(圖5)所示:
? ??

圖5

好了,為我們的英雄們做點(diǎn)樣式,讓它們好看一點(diǎn)吧:
樣式代碼如圖6所示:

圖6

4.下面,讓我們?yōu)槊恳粋€(gè)英雄,添加一個(gè)點(diǎn)擊事件,要求,英雄點(diǎn)擊之后,在上面顯示英雄的詳細(xì)信息:
? ? 首先為每一個(gè)英雄所在的li增加點(diǎn)擊事件:如圖7所示:

圖7

然后,在組件中,實(shí)現(xiàn)該點(diǎn)擊事件:如圖8所示:

圖8

點(diǎn)擊的時(shí)候,把點(diǎn)擊事件得到的hero 賦值 給了 selectedHero變量

接下來,增加模板內(nèi)容,顯示當(dāng)前選中的 li 的英雄: 如圖9所示:

圖9

其中 *ngIf="selectedHero" 的意思就是說:當(dāng)頁面剛加載進(jìn)來的時(shí)候,沒有觸發(fā)點(diǎn)擊事件的時(shí)候,
selectedHero 變量是沒有值的, 當(dāng)selectedHero 變量沒值的手,整個(gè)div不顯示也不加載,否則會(huì)報(bào)下面的錯(cuò) (圖10):

圖10

意思就是所,selectedHero 是 undefined,所有他沒有name屬性,
只有當(dāng) li 被點(diǎn)擊了,selectedHero 才會(huì)有值

5.通過下面圖6的方式為每一個(gè) li 增加一個(gè) selected class:

圖6

[class.xxx]的用法:
<a [class.xxx] = "true"> 代表 該a標(biāo)簽擁有 xxx 這個(gè)class
<a [class.xxx] = "false"> 代表 該a標(biāo)簽沒有 xxx 這個(gè)class

6.當(dāng)前我們達(dá)到的一個(gè)效果是這樣的:點(diǎn)擊某個(gè)英雄,讓英雄的詳細(xì)信息在當(dāng)前界面的上半部分顯示,能不能當(dāng)點(diǎn)擊某一個(gè)英雄的時(shí)候,讓英雄的詳細(xì)信息用另一個(gè)新的模板界面顯示呢?
答案是肯定的,下一節(jié),我們就來講一下 多組件的配合使用和傳值的問題 (Angular2 三:Hero Demo 多組件模板配合使用)