Angular 主從組件

此刻，HeroesComponent?同時顯示了英雄列表和所選英雄的詳情。

把所有特性都放在同一個組件中，將會使應(yīng)用“長大”后變得不可維護。 你要把大型組件拆分成小一點的子組件，每個子組件都要集中精力處理某個特定的任務(wù)或工作流。

本頁面中，你將邁出第一步 —— 把英雄詳情移入一個獨立的、可復(fù)用的?HeroDetailComponent。

HeroesComponent?將僅僅用來表示英雄列表。?HeroDetailComponent?將用來表示所選英雄的詳情。

你可以訪問下面的鏈接?https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail?從 GitHub 上查看我們提供源代碼。

制作?HeroDetailComponent

使用 Angular CLI 生成一個名叫?hero-detail?的新組件。

這個命令會做這些事：

• 創(chuàng)建一個目錄?src/app/hero-detail.

在這個目錄中會生成四個文件：

• 作為組件樣式的 CSS 文件。

• 作為組件模板的 HTML 文件。

• 存放組件類?HeroDetailComponent?的 TypeScript 文件。

• HeroDetailComponent?類的測試文件。

該命令還會把?HeroDetailComponent?添加到?src/app/app.module.ts?文件中?@NgModule?的?declarations?列表中。

編寫模板

從?HeroesComponent?模板的底部把表示英雄詳情的 HTML 代碼剪切粘貼到所生成的?HeroDetailComponent?模板中。

所粘貼的 HTML 引用了?selectedHero。 新的?HeroDetailComponent?可以展示任意英雄，而不僅僅所選的。因此還要把模板中的所有?selectedHero?替換為?hero。

完工之后，HeroDetailComponent?的模板應(yīng)該是這樣的：

src/app/hero-detail/hero-detail.component.html

添加?@Input()?hero 屬性

HeroDetailComponent?模板中綁定了組件中的?hero?屬性，它的類型是?Hero。

打開?HeroDetailComponent?類文件，并導(dǎo)入?Hero?符號。

src/app/hero-detail/hero-detail.component.ts (import Hero)

hero?屬性必須是一個帶有?@Input()?裝飾器的輸入屬性，因為外部的?HeroesComponent?組件將會綁定到它。就像這樣：

修改?@angular/core?的導(dǎo)入語句，導(dǎo)入?Input?符號。

src/app/hero-detail/hero-detail.component.ts (import Input)

添加一個帶有?@Input()?裝飾器的?hero?屬性。

這就是你要對?HeroDetailComponent?類做的唯一一項修改。?沒有其它屬性，也沒有展示邏輯。這個組件所做的只是通過?hero?屬性接收一個英雄對象，并顯示它。

顯示?HeroDetailComponent

HeroesComponent?仍然是主從視圖。

在你從模板中剪切走代碼之前，它自己負(fù)責(zé)顯示英雄的詳情?，F(xiàn)在它要把這個職責(zé)委托給?HeroDetailComponent?了。

這兩個組件將會具有父子關(guān)系。 當(dāng)用戶從列表中選擇了某個英雄時，父組件?HeroesComponent?將通過把要顯示的新英雄發(fā)送給子組件?HeroDetailComponent，來控制子組件。

你不用修改?HeroesComponent?類，但是要修改它的模板。

修改?HeroesComponent?的模板

HeroDetailComponent?的選擇器是?'app-hero-detail'。 把?<app-hero-detail>?添加到?HeroesComponent?模板的底部，以便把英雄詳情的視圖顯示到那里。

把?HeroesComponent.selectedHero?綁定到該元素的?hero?屬性，就像這樣：

heroes.component.html (HeroDetail binding)

[hero]="selectedHero"?是 Angular 的屬性綁定語法。

這是一種單向數(shù)據(jù)綁定。從?HeroesComponent?的?selectedHero?屬性綁定到目標(biāo)元素的?hero?屬性，并映射到了?HeroDetailComponent?的?hero?屬性。

現(xiàn)在，當(dāng)用戶在列表中點擊某個英雄時，selectedHero?就改變了。 當(dāng)?selectedHero?改變時，屬性綁定會修改?HeroDetailComponent?的?hero?屬性，HeroDetailComponent?就會顯示這個新的英雄。

修改后的?HeroesComponent?的模板是這樣的：

heroes.component.html

瀏覽器刷新，應(yīng)用又像以前一樣開始工作了。

修改了什么？

像以前一樣，一旦用戶點擊了一個英雄的名字，該英雄的詳情就顯示在了英雄列表下方。 現(xiàn)在，HeroDetailComponent?負(fù)責(zé)顯示那些詳情，而不再是?HeroesComponent。

把原來的?HeroesComponent?重構(gòu)成兩個組件帶來了一些優(yōu)點，無論是現(xiàn)在還是未來：

1. 你通過縮減?HeroesComponent?的職責(zé)簡化了該組件。

2. 你可以把?HeroDetailComponent?改進成一個功能豐富的英雄編輯器，而不用改動父組件?HeroesComponent。

3. 你可以改進?HeroesComponent，而不用改動英雄詳情視圖。

4. 將來你可以在其它組件的模板中重復(fù)使用?HeroDetailComponent。

查看最終代碼

你的應(yīng)用應(yīng)該變成了這樣?在線例子?/?下載范例。本頁所提及的代碼文件如下：

如果你想直接在?stackblitz 運行本頁中的例子，請單擊鏈接：https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail

本頁中所提及的代碼如下：https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail

對應(yīng)的文件列表和代碼鏈接如下：

小結(jié)

• 你創(chuàng)建了一個獨立的、可復(fù)用的?HeroDetailComponent?組件。

• 你用屬性綁定語法來讓父組件?HeroesComponent?可以控制子組件?HeroDetailComponent。

• 你用?@Input?裝飾器來讓?hero?屬性可以在外部的?HeroesComponent?中綁定。

https://www.cwiki.us/pages/viewpage.action?pageId=47841998