英雄指南——多组件

版本：4.0.0+2

此时AppComponent做了所有的事情。起初，它显示一个单一英雄的详情。然后，它成了有一列英雄和英雄详情的主从结构。很快会有新的需求和功能。你不能把所有功能堆积在一个组件中；那样不利于维护。

你需要把它拆分到子组件，每个组件专注于特定的任何或工作流程。最终，AppComponent会成为一个简单的包含这些子组件的壳。

在本章，你将通过提取英雄详情到一个独立的、可复用的组件朝那方向迈出第一步。当你做完这一切，应用看起来应该这样——在线示例 (查看源码)。

我们离开的地方

在开始本章之前，先检查一下，是否已经有了如下目录结构。如果没有，回到上一章。

如果应用不运行了，启动应用。当你做出修改时，通过刷新浏览器保持继续运行。

制作英雄详情组件

创建一个名为hero_detail_component.dart的文件。这个文件有一个新的 HeroDetailComponent。

Angular 惯例

• 组件类名应该使用大写驼峰命名，并且以 “Component” 结尾。
• 组件文件名应该使用蛇形——小写加下划线分隔符命名，并且以_component.dart结尾。HeroDetailComponent类就在hero_detail_component.dart文件中。
• 内部实现文件应该放在lib/src目录下。请看 pub 包布局惯例了解详情。

如下所示，开始编写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重构成两个组件带来如下收益，无论是现在还是将来：

1. 你通过减少AppComponent的职责简化了该组件。
2. 你可以把HeroDetailComponent改进成一个功能丰富的英雄编辑器，而不用改动父组件AppComponent。
3. 你可以改进AppComponent，而不用改动英雄详情视图。
4. 将来你可以在其它组件的模板中重复使用HeroDetailComponent。

回顾应用结构

验证你是否有如下结构：

你已经走过的路

在本章中你完成的内容如下：

• 创建了一个可复用的组件。
• 学会了如何让一个组件接收输入。
• 学会了在directives列表中声明应用指令。
• 学会了把父组件绑定到子组件。

应用看起来应该这样——在线示例 (查看源码)。

下一步

服务