英雄指南——多组件
版本：4.0.0+2
此时AppComponent做了所有的事情。起初，它显示一个单一英雄的详情。然后，它成了有一列英雄和英雄详情的主从结构。很快会有新的需求和功能。你不能把所有功能堆积在一个组件中；那样不利于维护。
你需要把它拆分到子组件，每个组件专注于特定的任何或工作流程。最终，AppComponent会成为一个简单的包含这些子组件的壳。
在本章，你将通过提取英雄详情到一个独立的、可复用的组件朝那方向迈出第一步。当你做完这一切，应用看起来应该这样——在线示例 (查看源码)。
我们离开的地方
在开始本章之前，先检查一下，是否已经有了如下目录结构。如果没有，回到上一章。
如果应用不运行了，启动应用。当你做出修改时，通过刷新浏览器保持继续运行。
制作英雄详情组件
创建一个名为hero_detail_component.dart的文件。这个文件有一个新的 HeroDetailComponent。
Angular 惯例
如下所示，开始编写HeroDetailComponent：
// lib/src/hero_detail_component.dart (initial version)
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'hero-detail',
directives: const [CORE_DIRECTIVES, formDirectives],
)
class HeroDetailComponent {
}
要定义组件，总是要导入主要的 Angular 库。
@Component注解为组件提供了 Angular 元数据。CSS 选择器名hero-detail将会匹配元素标签，以识别在父组件模板内的本组件。在本教程快结束的部分，你将添加一个<hero-detail>元素到AppComponent模板。
英雄详情模板
要移动英雄详情视图到HeroDetailComponent，从AppComponent模板的底部剪切英雄详情内容，并把它粘贴到新的@Component注解的template参数中。
HeroDetailComponent有一个 hero，而不是 selectedHero。使用 ”hero“ 替换模板中的每一处 ”selectedHero“。当你昨晚这一切，新的模板看起来这样：
// lib/src/hero_detail_component.dart (template)
template: '''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>''',
添加 hero 属性
HeroDetailComponent模板绑定到组件的hero属性。把这个属性及其必备的导入一块添加到HeroDetailComponent类。
// lib/src/hero_detail_component.dart (hero)
import 'hero.dart';
class HeroDetailComponent {
Hero hero;
}
hero 属性是一个输入属性
在本章稍后的部分，父组件AppComponent通过绑定它的selectedHero属性到HeroDetailComponent的hero属性来会告诉子组件HeroDetailComponent显示哪个英雄。绑定看起来是这样的：
<hero-detail [hero]="selectedHero"></hero-detail>
放在等号 (=) 左边方括号中的hero属性，使其成为了属性绑定表达式的目标。你必须声明一个目标绑定属性为一个输入属性。否则，Angular 拒绝绑定，并抛出一个错误。
通过使用@Input注解，声明hero是一个输入属性：
// lib/src/hero_detail_component.dart (Input annotation)
@Input()
Hero hero;
更多关于输入属性的内容，请看属性指令。
没错。hero属性是HeroDetailComponent类中唯一的东西。它做的事情就是通过它的hero输入属性接收一个英雄对象，然后使用它的模板绑定到该属性。下面是完成后的HeroDetailComponent。
// lib/src/hero_detail_component.dart
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'hero.dart';
@Component(
selector: 'hero-detail',
template: '''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>''',
directives: const [CORE_DIRECTIVES, formDirectives],
)
class HeroDetailComponent {
@Input()
Hero hero;
}
添加 HeroDetailComponent 到 AppComponent
AppComponent仍然是主从结构的视图。在你从模板中剪切出那一部分之前，它被用来在它自身上显示英雄详情。现在，它将委托给HeroDetailComponent。
首先导入HeroDetailComponent以使AppComponent可以引用它。
import 'src/hero_detail_component.dart';
想想那个在HeroDetailComponent元数据中的 CSS 选择器hero-detail。那就是表示HeroDetailComponent元素的标签名。
在靠近AppComponent模板的底部添加<hero-detail>元素，那里是之前英雄详情待的地方。
通过绑定AppComponent的selectedHero属性到HeroDetailComponent的hero属性，协调主组件AppComponent和HeroDetailComponent。
<hero-detail [hero]="selectedHero"></hero-detail>
现在每次selectedHero发生变化，HeroDetailComponent就获取一个新的英雄来显示。
修改后的AppComponent模板看起来是这样：
// lib/app_component.html
<h1>{{title}}</h1>
<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>
<hero-detail [hero]="selectedHero"></hero-detail>
每次用户选择一个新英雄详情信息应该会更新。然而现在什么事都没发生！点击一个英雄。没有详情信息。如果你在浏览器开发工具的控制台寻找错误。没有错误。
这好像是 Angular 忽略了新标签。原因就是它忽略了新的标签。
指令列表
浏览器会忽视它无法识别的 HTML 标签和属性（attribute），Angular同样如此。
你已经导入HeroDetailComponent，并在模板中使用了<hero-detail>，但是你并没有告诉Angular。
正如你之前为内置 Angular 指令所做的，通过在元数据directives列表中列出英雄详情组件来告诉 Angular。你再也不需要formDirectives了，所以删除它以及在文件顶部的angular_forms导入：
// lib/app_component.dart (directives)
directives: const [CORE_DIRECTIVES, HeroDetailComponent],
刷新浏览器。应用正常工作了。
应用设计变化
像之前一样，每当用户点击了一个英雄的名字，该英雄的详情就显示在了英雄列表的下方。但现在，HeroDetailComponent用来显示那些详情。
把原来的AppComponent重构成两个组件带来如下收益，无论是现在还是将来：
- 你通过减少
AppComponent的职责简化了该组件。 - 你可以把
HeroDetailComponent改进成一个功能丰富的英雄编辑器，而不用改动父组件AppComponent。 - 你可以改进
AppComponent，而不用改动英雄详情视图。 - 将来你可以在其它组件的模板中重复使用
HeroDetailComponent。
回顾应用结构
验证你是否有如下结构：
你已经走过的路
在本章中你完成的内容如下：
- 创建了一个可复用的组件。
- 学会了如何让一个组件接收输入。
- 学会了在
directives列表中声明应用指令。 - 学会了把父组件绑定到子组件。
下一步
