上一節(jié)我們把一級界面做好了,并且添加了點(diǎn)擊事件,如果沒看的話,請點(diǎn)擊這里
接下來 來實(shí)現(xiàn) 一級頁面中 某個(gè)英雄點(diǎn)擊的時(shí)候 , 用另一個(gè)模板來顯示詳細(xì)信息
在 src/app 文件夾之下 創(chuàng)建一個(gè)新的文件 hero-detail.component.ts
在該文件中編寫代碼如下:(圖1)
注意:命名規(guī)范方面的問題
? ? 所有組件名都以 Component 結(jié)尾
? ? 所有組件文件都以 .component 結(jié)尾
好了,現(xiàn)在讓我們來實(shí)現(xiàn)第一步,將英雄的詳細(xì)信息展示都組件 HeroDetailComponent 中, 而不是像原來那樣展示到 AppComponent 中
1.將組件 AppComponent 的模板中顯示英雄詳細(xì)信息的那段 挪到 HeroDetailComponent 中
2.在AppComponent組件中,我們擁有selectedHero屬性,但是在HeroDetailComponent組件中并沒有這個(gè)屬性,所有,將HeroDetailComponent組件模板中的所有selectedHero用hero屬性替換掉.
這兩步操作完成之后, app.component.ts 和 hero-detail.component.ta 的界面如下面的圖2 圖3 所示:
? ??
3.但是我們的HeroDetailComponent組件中,到現(xiàn)在為止,并沒有 hero 這個(gè)屬性,
所以我們要在HeroDetailComponent組件的class中增加這樣一個(gè)hero屬性,圖4
4.英雄屬性做好之后,有發(fā)現(xiàn)了一個(gè)問題, hero屬性并不認(rèn)識Hero這個(gè)類型
5.這是后,打開app.component.ts 這個(gè)文件,我們發(fā)現(xiàn),原來這個(gè)文件中,定義了一個(gè)叫Hero的類組件,圖5
6.問題就來了,既然 Hero 組件是在 app.component.js 文件中定義的,那hero-detail.component.ts 文件中可定就不認(rèn)識這個(gè) Hero , 那我們該怎么辦呢?
7.接下來我們創(chuàng)建一個(gè)新的文件 hero.ts
? ? 在這個(gè)文件中我們定義一個(gè)Hero 類,并導(dǎo)出,圖6
8.在app.component.ts 中刪掉那個(gè) Hero 組件,并導(dǎo)入 hero.ts ,這樣app.component.ts 就認(rèn)識英雄 這個(gè)組件了,
同理 在hero-detail.component.ts 中 也導(dǎo)入 hero.ts 這個(gè)文件,這樣,HeroDetailComponent 不也就認(rèn)識Hero 這個(gè)東東了,按照這個(gè)思路,兩個(gè)文件的代碼修改完之后如圖7 圖8 所示:
9.引入之后,當(dāng)我們在列表中點(diǎn)擊某一個(gè)英雄的時(shí)候,會把英雄的值傳遞給selectedHero變量,怎么才能傳遞給HeroDetailComponent的hero屬性呢?
在AppComponent的模板中,引入HeroDetailComponent的模板,圖9
當(dāng)在列表中點(diǎn)擊某個(gè)英雄的時(shí)候,會把英雄的變量傳遞給HeroDetailComponent模板的[hero]屬性,這是,我們需要在HeroDetailComponent組件中增加一個(gè)Input模塊,來接受傳遞過來的值:圖10
ok,大功告成,去瀏覽器試一下吧,當(dāng)在頁面上點(diǎn)擊某個(gè)英雄的時(shí)候,顯示英雄的詳細(xì)信息,但英雄的詳細(xì)信息,是根據(jù)另一個(gè)模板HeroDetailComponent來顯示的,而不是原來的一個(gè)模板組件了.
到此為止,我們的界面展示才不多就完成了,但是還有一個(gè)問題就是:我們的數(shù)據(jù)是在組件中寫死的,怎樣才能做到讓我們的數(shù)據(jù)和界面組件分離呢? 請看下節(jié) Angular2 四:Services 服務(wù)注入
