此刻，HeroesComponent顯示heroes列表和所選heroes的詳細(xì)信息。

隨著應(yīng)用程序的增長(zhǎng)保持一個(gè)組件中的所有功能將不可維護(hù)。您需要將大型組件分成更小的子組件，每個(gè)組件都專注于特定的任務(wù)或工作流程。

在此頁(yè)面中，您將通過將heroes詳細(xì)信息移動(dòng)到單獨(dú)的可重復(fù)使用的位置來(lái)朝此方向邁出第一步HeroDetailsComponent。

該HeroesComponent會(huì)目前唯一的heroes名單。該HeroDetailsComponent會(huì)提出一個(gè)選擇heroes的細(xì)節(jié)。

?

9.X-使HeroDetailComponent

使用Angular CLI生成一個(gè)名為的新組件hero-detail(組件一般在app目錄下生產(chǎn))。

ng generate component hero-detail

該命令腳手架HeroDetailComponent文件并聲明組件AppModule。

?

每次創(chuàng)建組件，都會(huì)聲明到app.module.ts?

9.1-編寫模板

從HeroesComponent模板底部剪下heroes細(xì)節(jié)的HTML?，并將其粘貼到模板中生成的樣板上HeroDetailComponent。

粘貼的HTML指的是一個(gè)selectedHero。新的HeroDetailComponent可以呈現(xiàn)任何heroes，而不僅僅是一個(gè)選定的heroes。因此，在模板中的任何地方都將“selectedHero”替換為“hero”。

完成后，HeroDetailComponent模板應(yīng)該如下所示：

?

herodetail.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>

?

9.2-添加heroes屬性@Input()

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

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

?

src / app / hero-detail / hero-detail.component.ts（導(dǎo)入heroes）

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

?

該hero屬性?必須是一個(gè)Input屬性，用裝飾器注釋，因?yàn)橥獠繉⑾襁@樣綁定到它。@Input()?HeroesComponent

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

修改@angular/core進(jìn)口聲明以包含Input符號(hào)。

?

src / app / hero-detail / hero-detail.component.ts（導(dǎo)入輸入）

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

添加一個(gè)hero屬性，在裝飾器之前。@Input()

@Input() hero: Hero;

這是你應(yīng)該對(duì)HeroDetailComponent班上唯一的改變。沒有更多的屬性。沒有表示邏輯。該組件僅通過其hero屬性接收heroes對(duì)象并顯示它。

?

9.3-顯示HeroDetailComponent

這HeroesComponent仍然是主/細(xì)節(jié)視圖。

它用于在切割模板的該部分之前自行顯示heroes詳細(xì)信息?，F(xiàn)在它將委托給HeroDetailComponent。

這兩個(gè)組件將具有父母/子女關(guān)系。父母HeroesComponent將HeroDetailComponent?通過發(fā)送一個(gè)新的heroes來(lái)控制孩子，以便在用戶從列表中選擇heroes時(shí)顯示。

你不會(huì)改變HeroesComponent?班級(jí)，但你會(huì)改變它的模板。

更新HeroesComponent模板

該HeroDetailComponent選擇是'app-hero-detail'。<app-hero-detail>在HeroesComponent模板底部附近添加一個(gè)元素，其中heroes細(xì)節(jié)視圖曾經(jīng)是。

像這樣綁定HeroesComponent.selectedHero元素的hero屬性。

?

heroes.component.html（HeroDetail綁定）

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

[hero]="selectedHero"是一個(gè)Angular?屬性綁定。

這是一個(gè)單向的數(shù)據(jù)從綁定selectedHero的屬性HeroesComponent的hero目標(biāo)元素，它映射到的財(cái)產(chǎn)hero的性質(zhì)HeroDetailComponent。

現(xiàn)在，當(dāng)用戶點(diǎn)擊列表中的heroes時(shí)，selectedHero就會(huì)發(fā)生變化。當(dāng)selectedHero更改時(shí)，屬性綁定更新hero?并HeroDetailComponent顯示新的heroes。

修改后的HeroesComponent模板應(yīng)該如下所示：

<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>

瀏覽器刷新并且應(yīng)用程序重新開始工作，就像以前一樣。

?

什么改變？

和以前一樣，只要用戶點(diǎn)擊heroes名字，heroes詳情就會(huì)出現(xiàn)在heroes列表下方。現(xiàn)在HeroDetailComponent是呈現(xiàn)這些細(xì)節(jié)，而不是HeroesComponent。

將原件重構(gòu)HeroesComponent為兩個(gè)組件，現(xiàn)在和未來(lái)都會(huì)帶來(lái)好處：

你HeroesComponent通過減少責(zé)任來(lái)簡(jiǎn)化它。

你可以演變HeroDetailComponent成一個(gè)豐富的heroes編輯器，而無(wú)需觸摸父母HeroesComponent。

你可以在HeroesComponent不觸及heroes細(xì)節(jié)視圖的情況下進(jìn)化。

您可以重新使用HeroDetailComponent未來(lái)組件的模板。

src/app/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> src/app/herodetail.component.ts

import { Component, OnInit, Input } from '@angular/core'; import { Hero } from '../hero';@Component({selector: 'app-hero-detail',templateUrl: './hero-detail.component.html',styleUrls: ['./hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit {@Input() hero: Hero;constructor() { }ngOnInit() {}}

?

src/app/heroes/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>

?

?

如果需要看出區(qū)別，源碼如下：

?

Angualr2.x-列表

1 -------------------------------------------------------------------------- 2 //heroes.component.ts 3 4 import { Component, OnInit } from '@angular/core'; 5 import { Hero } from '../hero'; 6 import { HEROES } from '../mock-heroes'; 7 8 @Component({ 9 selector: 'app-heroes', 10 templateUrl: './heroes.component.html', 11 styleUrls: ['./heroes.component.css'] 12 }) 13 export class HeroesComponent implements OnInit { 14 15 heroes = HEROES; 16 17 selectedHero: Hero; 18 19 20 constructor() { } 21 22 ngOnInit() { 23 } 24 25 onSelect(hero: Hero): void { 26 this.selectedHero = hero; 27 } 28 } 29 30 -------------------------------------------------------------------------- 31 //heroes.component.html 32 33 <h2>My Heroes</h2> 34 <ul class="heroes"> 35 <li *ngFor="let hero of heroes" 36 [class.selected]="hero === selectedHero" 37 (click)="onSelect(hero)"> 38 <span class="badge">{{hero.id}}</span> {{hero.name}} 39 </li> 40 </ul> 41 42 <div *ngIf="selectedHero"> 43 44 <h2>{{ selectedHero.name | uppercase }} Details</h2> 45 <div><span>id: </span>{{selectedHero.id}}</div> 46 <div> 47 <label>name: 48 <input [(ngModel)]="selectedHero.name" placeholder="name"> 49 </label> 50 </div> 51 52 </div> 53 54 55 -------------------------------------------------------------------------- 56 //heroes.component.css 57 58 .selected { 59 background-color: #CFD8DC !important; 60 color: white; 61 } 62 .heroes { 63 margin: 0 0 2em 0; 64 list-style-type: none; 65 padding: 0; 66 width: 15em; 67 } 68 .heroes li { 69 cursor: pointer; 70 position: relative; 71 left: 0; 72 background-color: #EEE; 73 margin: .5em; 74 padding: .3em 0; 75 height: 1.6em; 76 border-radius: 4px; 77 } 78 .heroes li.selected:hover { 79 background-color: #BBD8DC !important; 80 color: white; 81 } 82 .heroes li:hover { 83 color: #607D8B; 84 background-color: #DDD; 85 left: .1em; 86 } 87 .heroes .text { 88 position: relative; 89 top: -3px; 90 } 91 .heroes .badge { 92 display: inline-block; 93 font-size: small; 94 color: white; 95 padding: 0.8em 0.7em 0 0.7em; 96 background-color: #607D8B; 97 line-height: 1em; 98 position: relative; 99 left: -1px; 100 top: -4px; 101 height: 1.8em; 102 margin-right: .8em; 103 border-radius: 4px 0 0 4px; 104 }

Angular2.x-子組件?

1 <--! 2 　　hero-detail.component.ts 3 --> 4 import { Component, OnInit, Input } from '@angular/core'; 5 import { Hero } from '../hero'; 6 7 @Component({ 8 selector: 'app-hero-detail', 9 templateUrl: './hero-detail.component.html', 10 styleUrls: ['./hero-detail.component.css'] 11 }) 12 export class HeroDetailComponent implements OnInit { 13 @Input() hero: Hero; 14 15 constructor() { } 16 17 ngOnInit() { 18 } 19 20 } 21 ---------------------------------------------------------------------------------- 22 <--! 23 　　hero-detail.component.html 24 --> 25 <div *ngIf="hero"> 26 27 <h2>{{ hero.name | uppercase }} Details</h2> 28 <div><span>id: </span>{{hero.id}}</div> 29 <div> 30 <label>name: 31 <input [(ngModel)]="hero.name" placeholder="name"/> 32 </label> 33 </div> 34 35 </div> 36 ----------------------------------------------------------------------------------- 37 <--! 38 　　heroes.component.html 39 --> 40 <h2>My Heroes</h2> 41 42 <ul class="heroes"> 43 <li *ngFor="let hero of heroes" 44 [class.selected]="hero === selectedHero" 45 (click)="onSelect(hero)"> 46 <span class="badge">{{hero.id}}</span> {{hero.name}} 47 </li> 48 </ul> 49 50 <app-hero-detail [hero]="selectedHero"></app-hero-detail>

?

簡(jiǎn)述的話，也就是：

1. 在app下生成

ng generate component hero-detail

2.heroes.component.html復(fù)制到hero-detail.component.html（selectedHero內(nèi)容全部修改為hero）

<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>

3.在hero-detail.component.ts（導(dǎo)入heroes）

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

4.在hero-detail.component.ts(導(dǎo)入輸入)

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

5.添加一個(gè)hero屬性，在裝飾器之前。@Input()

@Input() hero: Hero;

6.顯示heroes.component.html

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

　　

?

　　

總結(jié)

以上是生活随笔為你收集整理的Angular2.x-主/细节组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。