Angular 主從組件

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

把全部特性都放在同一個組件中，將會使應用「長大」後變得不可維護。 你要把大型組件拆分紅小一點的子組件，每一個子組件都要集中精力處理某個特定的任務或工做流。

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

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

你能夠訪問下面的連接 https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail 從 GitHub 上查看咱們提供源代碼。

製做 HeroDetailComponent

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

ng generate component hero-detail

這個命令會作這些事：

• 建立一個目錄 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 的模板應該是這樣的：

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

<div *ngIf="hero">     <h2>{{hero.name | uppercase}} Details</h2>   <div><span>id: </span>{{hero.id}}</div>   <div>     <label>name:       <input [(ngModel)]="hero.name" placeholder="name"/>     </label>   </div>   </div>

添加 @Input() hero 屬性

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

打開 HeroDetailComponent 類文件，並導入 Hero 符號。

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

import { Hero } from '../hero';

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

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

修改 @angular/core 的導入語句，導入 Input 符號。

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

import { Component, OnInit, Input } from '@angular/core';

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

@Input() hero: Hero;

這就是你要對  類作的惟一一項修改。 沒有其它屬性，也沒有展現邏輯。這個組件所作的只是經過  屬性接收一個英雄對象，並顯示它。HeroDetailComponenthero

顯示 HeroDetailComponent

HeroesComponent 仍然是主從視圖。

在你從模板中剪切走代碼以前，它本身負責顯示英雄的詳情。如今它要把這個職責委託給 HeroDetailComponent 了。

這兩個組件將會具備父子關係。 當用戶從列表中選擇了某個英雄時，父組件 HeroesComponent 將經過把要顯示的新英雄發送給子組件 HeroDetailComponent，來控制子組件。

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

修改 HeroesComponent 的模板

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

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

heroes.component.html (HeroDetail binding)

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

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

這是一種單向數據綁定。從 HeroesComponent 的 selectedHero 屬性綁定到目標元素的 hero 屬性，並映射到了 HeroDetailComponent 的 hero 屬性。

如今，當用戶在列表中點擊某個英雄時，selectedHero 就改變了。 當 selectedHero 改變時，屬性綁定會修改 HeroDetailComponent 的 hero 屬性，HeroDetailComponent 就會顯示這個新的英雄。

修改後的 HeroesComponent 的模板是這樣的：

heroes.component.html

<h2>My Heroes</h2>   <ul class="heroes">   <li *ngFor="let hero of heroes"     [class.selected]="hero === selectedHero"     (click)="onSelect(hero)">     <span class="badge">{{hero.id}}</span> {{hero.name}}   </li> </ul>   <app-hero-detail [hero]="selectedHero"></app-hero-detail>

瀏覽器刷新，應用又像之前同樣開始工做了。

修改了什麼？

像之前同樣，一旦用戶點擊了一個英雄的名字，該英雄的詳情就顯示在了英雄列表下方。 如今，HeroDetailComponent 負責顯示那些詳情，而再也不是 HeroesComponent。

把原來的 HeroesComponent 重構成兩個組件帶來了一些優勢，不管是如今仍是將來：

1. 你經過縮減 HeroesComponent 的職責簡化了該組件。
2. 你能夠把 HeroDetailComponent 改進成一個功能豐富的英雄編輯器，而不用改動父組件 HeroesComponent。
3. 你能夠改進 HeroesComponent，而不用改動英雄詳情視圖。
4. 未來你能夠在其它組件的模板中重複使用 HeroDetailComponent。

查看最終代碼

你的應用應該變成了這樣 在線例子 / 下載範例。本頁所說起的代碼文件以下：

若是你想直接在 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

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

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

小結

• 你建立了一個獨立的、可複用的 HeroDetailComponent 組件。
• 你用屬性綁定語法來讓父組件 HeroesComponent 能夠控制子組件 HeroDetailComponent。
• 你用 @Input 裝飾器來讓 hero 屬性能夠在外部的 HeroesComponent 中綁定。

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