目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中，我们将来可能会受到新的需求，修改这个组件又不能影响另外一个。然而每一次更改都会给这两个组件带来风险和双倍的测试负担，没有任何好处。如果我们需要在其他地方复用英雄详情组件，英雄列表组件也会跟着混进去。
我们当前的组件违反了单一职责原则，我们需要把英雄详情拆分成一个独立的组件。
1、拆分英雄详情组件
在app目录下创建一个名叫hero-detail-component.ts的文件，并且创建HeroDetailComponent组件，代码如下：
import { Component,Input } from '@angular/core'; //Component装饰器，Input输入装饰器
import {Heroo} from './hero';
@Component({
selector: 'my-hero-detail',
})
export class HeroDetailComponent {
}
命名规则：我们希望一眼能看出哪些是组件，哪些是文件包含组件，我们所有的组件名都以.component结尾，我们组建的文件名都以.component结尾。
2、英雄的详情模板
接下来我们需要把英雄详情的模板放到这个组件中来：
import { Component,Input } from '@angular/core';
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}}详细信息</h2>
<div><label>id:</label>{{hero.id}}</div>
<div>
<label>姓名：</label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
`
})
export class HeroDetailComponent {
}
3、添加hero属性
我们在app.component.ts和hero-detail-component.ts中都需要引用Heroo这个类，所以我们把这个类新建一个文件夹hero.ts
export class Heroo{
id:number;
name:string;
}
同时我们在两个组件中AppComponent和HeroDetailComponent都导出这个类
import {Heroo} from './hero';
还得告诉HeroDetailComponent显示那个英雄，谁告诉他呢？当然是AppComponent了。
AppComponent确实知道该显示哪个英雄，用户从列表中选中的那个，用户选择的英雄在他的selectrdHero属性中。
我们需要在AppComponent模板中添加：将hero属性复制为selectedHero属性，使得AppComponent组件和HeroDetailComponent组件形成联系。
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
同时修改hero-detail-component.ts
export class HeroDetailComponent {
@Input()
hero:Heroo;//带有@Input()装饰器的输入属性
}
4、更新AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent1 } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent1,
HeroDetailComponent
],
bootstrap: [ AppComponent1 ]
})
export class AppModule { }
这样，我们创建了第一个可复用组件！
我们可以在应用中的任何地方使用这个HeroDetailComponent组件来显示英雄详情。