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

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

在此頁面中，您將通過將heroes詳細信息移動到單獨的可重復使用的位置來朝此方向邁出第一步HeroDetailsComponent。

該HeroesComponent會目前唯一的heroes名單。該HeroDetailsComponent會提出一個選擇heroes的細節。

?

9.X-使HeroDetailComponent

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

ng generate component hero-detail

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

?

每次創建組件，都會聲明到app.module.ts?

9.1-編寫模板

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

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

完成后，HeroDetailComponent模板應該如下所示：

?

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類文件并導入Hero符號。

?

src / app / hero-detail / hero-detail.component.ts（導入heroes）

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

?

該hero屬性?必須是一個Input屬性，用裝飾器注釋，因為外部將像這樣綁定到它。@Input()?HeroesComponent

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

修改@angular/core進口聲明以包含Input符號。

?

src / app / hero-detail / hero-detail.component.ts（導入輸入）

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

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

@Input() hero: Hero;

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

?

9.3-顯示HeroDetailComponent

這HeroesComponent仍然是主/細節視圖。

它用于在切割模板的該部分之前自行顯示heroes詳細信息。現在它將委托給HeroDetailComponent。

這兩個組件將具有父母/子女關系。父母HeroesComponent將HeroDetailComponent?通過發送一個新的heroes來控制孩子，以便在用戶從列表中選擇heroes時顯示。

你不會改變HeroesComponent?班級，但你會改變它的模板。

更新HeroesComponent模板

該HeroDetailComponent選擇是'app-hero-detail'。<app-hero-detail>在HeroesComponent模板底部附近添加一個元素，其中heroes細節視圖曾經是。

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

?

heroes.component.html（HeroDetail綁定）

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

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

這是一個單向的數據從綁定selectedHero的屬性HeroesComponent的hero目標元素，它映射到的財產hero的性質HeroDetailComponent。

現在，當用戶點擊列表中的heroes時，selectedHero就會發生變化。當selectedHero更改時，屬性綁定更新hero?并HeroDetailComponent顯示新的heroes。

修改后的HeroesComponent模板應該如下所示：

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

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

?

什么改變？

和以前一樣，只要用戶點擊heroes名字，heroes詳情就會出現在heroes列表下方。現在HeroDetailComponent是呈現這些細節，而不是HeroesComponent。

將原件重構HeroesComponent為兩個組件，現在和未來都會帶來好處：

你HeroesComponent通過減少責任來簡化它。

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

你可以在HeroesComponent不觸及heroes細節視圖的情況下進化。

您可以重新使用HeroDetailComponent未來組件的模板。

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>

?

?

如果需要看出區別，源碼如下：

?

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>

?

簡述的話，也就是：

1. 在app下生成

ng generate component hero-detail

2.heroes.component.html復制到hero-detail.component.html（selectedHero內容全部修改為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（導入heroes）

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

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

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

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

@Input() hero: Hero;

6.顯示heroes.component.html

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

　　

?

　　

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。