主從組件

繼學(xué)習(xí)筆記6，現(xiàn)在可以在頁面上顯示一個數(shù)組，但是原則上不能將所有特性放在同一個組件中，因為如果將所有特性放在同一個組件中，當(dāng)特性特別多時，組件就變得不好維護了。所以要將大型組件拆分為多個小型組件，使每一個小型組件集中處理某一個特性任務(wù)或者工作流，而且這樣也便于維護。

這次要將學(xué)習(xí)筆記6中的查看hero詳情，放置在一個新的，獨立，可復(fù)用的組件中，集中在新的組件管理和維護hero詳情的信息。

1.創(chuàng)建一個新的組件

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

wjydeMacBook-Pro:demo wjy$ ng generate component hero-detailCREATE src/app/hero-detail/hero-detail.component.css (0 bytes)CREATE src/app/hero-detail/hero-detail.component.html (30 bytes)CREATE src/app/hero-detail/hero-detail.component.spec.ts (657 bytes)CREATE src/app/hero-detail/hero-detail.component.ts (288 bytes)UPDATE src/app/app.module.ts (548 bytes)

這樣就生成了 HeroDetailComponent 組件所需要的文件，并把它聲明在 AppModule 中。

2.編寫 HeroDetailComponent的模版（hero-detail.component.html）

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

粘貼過來的html代碼中，有selectHero這個屬性，由于現(xiàn)在我們展示的不僅僅是被選中的hero，而是需要展示的是每一個hero，這個過程相當(dāng)于將HeroDetail這個組件的功能擴大化。所以將其更改為：hero , 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>

因為HeroDetail重的hero是從其他父組件得到。所以hero 屬性必須是一個帶有 @Input() 裝飾器的輸入屬性，因為外部的 HeroesComponent 組件將會綁定到它。

具體步驟：

導(dǎo)入Hero

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

導(dǎo)入Input符號

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

定義hero

@Input() hero: Hero;

這樣，就對heroDetail的類文件寫好了，heroDetail所做的工作就是：從其他的父組件中接收一個Hero類型的對象，并將它展示出來

3.顯示 HeroDetailComponent

現(xiàn)在有HeroDetail組件顯示每一個Hero的具體詳情信息，而Heroes組件需要顯示每一個Hero的詳細(xì)信息，這個時候，Heroes組件和heroDetail組件就有了主從關(guān)系，heroes組件需要將需要展示詳情的Hero對象傳給具有展示功能的HeroDetail組件