溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
此刻，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">? ??<h3>{{hero.name | uppercase}} Details</h3>??<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; |
這就是你要對?HeroDetailComponent?類做的唯一一項修改。?沒有其它屬性，也沒有展示邏輯。這個組件所做的只是通過?hero?屬性接收一個英雄對象，并顯示它。
HeroDetailComponentHeroesComponent?仍然是主從視圖。
在你從模板中剪切走代碼之前，它自己負責顯示英雄的詳情。現在它要把這個職責委托給?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
<h3>My Heroes</h3>? <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?重構成兩個組件帶來了一些優點，無論是現在還是未來：
你通過縮減?HeroesComponent?的職責簡化了該組件。
你可以把?HeroDetailComponent?改進成一個功能豐富的英雄編輯器，而不用改動父組件?HeroesComponent。
你可以改進?HeroesComponent，而不用改動英雄詳情視圖。
將來你可以在其它組件的模板中重復使用?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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
