angular-cn/public/docs/ts/latest/tutorial/toh-pt3.jade

include ../_util-fns

:marked
  The `AppComponent` is doing _everything_ at the moment.
  In the beginning, it showed details of a single hero.
  Then it became a master/detail form with both a list of heroes and the hero detail.
  Soon there will be new requirements and capabilities.
  You can't keep piling features on top of features in one component; that's not maintainable.
  
  此刻，`AppComponent`负责*所有事*。
  起初，它只显示单个英雄的详情。然后，它变成了主从结构，同时显示英雄列表和一个英雄详情。
  现在，我们很快又会有新需求了。
  我们不能把这些需求全都放在一个组件中，否则将不可维护。

  You'll need to break it up into sub-components, each focused on a specific task or workflow.
  Eventually, the `AppComponent` could become a simple shell that hosts those sub-components.
  
  我们要把它拆分成一些子组件，每个子组件只聚焦在一个特定的任务或工作流上。
  最后，`AppComponent`将会变成一个简单的壳，用来作为那些子组件的宿主。

  In this page, you'll take the first step in that direction by carving out the hero details into a separate, reusable component.
  When you're done, the app should look like this <live-example></live-example>.

  本章中，我们要做的第一步就是把英雄详情拆分到一个独立的、可复用的组件中。
  做完这些，应用看起来是这样的：<live-example>在线例子</live-example>。

.l-main-section
:marked
  ## Where you left off

  ## 延续上一步教程

  Before getting started on this page, verify that you have the following structure from earlier in the Tour of Heroes.
  If not, go back to the previous pages.

  在继续《英雄指南》之前，先检查一下，是否已经有了如下目录结构。如果没有，回上一章，看看错过了哪里。

.filetree
  .file angular-tour-of-heroes
  .children
    .file src
    .children
      .file app
      .children
        .file app.component.ts
        .file app.module.ts
      .file main.ts
      .file index.html
      .file styles.css
      .file systemjs.config.js
      .file tsconfig.json
    .file node_modules ...
    .file package.json
:marked
  Keep the app transpiling and running while you build the Tour of Heroes
  by entering the `npm start` command in a terminal window
  [as you did before](toh-pt1.html#keep-transpiling "Keep the app running").
  
  [像以前一样](toh-pt1.html#keep-transpiling "Keep the app running")，在终端窗口中输入`npm start`命令，以便在构建《英雄指南》时保持持续转译和运行。

  ## Make a hero detail component
  
  ## 制作英雄详情组件
  
  Add a file named `hero-detail.component.ts` to the `app/` folder.
  This file will hold the new `HeroDetailComponent`.
  
  The file and component names follow the standard described in the Angular
  [style guide](../guide/style-guide.html#naming).

  * The component _class_ name should be written in _upper camel case_ and end in the word "Component".
  The hero detail component class is `HeroDetailComponent`.

  * The component _file_ name should be spelled in [_lower dash case_](../guide/glossary.html#dash-case),
  each word separated by dashes, and end in `.component.ts`.
  The `HeroDetailComponent` class goes in the `hero-detail.component.ts` file.

  Start writing the `HeroDetailComponent` as follows:

+makeExample('toh-3/ts/app/hero-detail.component.1.ts', 'v1', 'app/hero-detail.component.ts (initial version)')(format=".")
a#selector
:marked
  To define a component, you always import the `Component` symbol.

  The `@Component` decorator provides the Angular metadata for the component.
  The CSS selector name, `hero-detail`, will match the element tag
  that identifies this component within a parent component's template.
  [Near the end of this tutorial page](#add-hero-detail "Add the HeroDetailComponent to the AppComponent"),
  you'll add a `<hero-detail>` element to the `AppComponent` template.

  Always `export` the component class because you'll always `import` it elsewhere.
:marked
  ### Hero detail template
  To move the hero detail view to the `HeroDetailComponent`,
  cut the hero detail _content_ from the bottom of the `AppComponent` template
  and paste it into a new `template` property in the `@Component` metadata.

  The `HeroDetailComponent` has a _hero_, not a _selected hero_.
  Replace the word, "selectedHero", with the word, "hero", everywhere in the template.
  When you're done, the new template should look like this:

+makeExample('toh-3/ts/src/app/hero-detail.component.ts', 'template', 'src/app/hero-detail.component.ts (template)')(format=".")


:marked
  ### Add the *hero* property

  The `HeroDetailComponent` template binds to the component's `hero` property.
  Add that property to the `HeroDetailComponent` class like this:
+makeExample('toh-3/ts/app/hero-detail.component.1.ts', 'hero', 'src/app/hero-detail.component.ts (hero property)')
:marked
  The `hero` property is typed as an instance of `Hero`.
  The `Hero` class is still in the `app.component.ts` file.
  Now there are two components that need to reference the `Hero` class.
  The Angular [style guide](../guide/style-guide.html#rule-of-one "Style guide: rule of one") recommends one class per file anyway.

  Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.

+makeExample('toh-3/ts/src/app/hero.ts', '', 'src/app/hero.ts')(format=".")

:marked
  Now that the `Hero` class is in its own file, the `AppComponent` and the `HeroDetailComponent` have to import it.
  Add the following `import` statement near the top of _both_ the `app.component.ts` and the `hero-detail.component.ts` files.
  
+makeExample('toh-3/ts/app/hero-detail.component.1.ts', 'hero-import')

:marked
  ### The *hero* property is an *input* property
  
  ### *hero*属性是一个***输入***属性

  [Later in this page](#add-hero-detail "Add the HeroDetailComponent to the AppComponent"),
  the parent `AppComponent` will tell the child `HeroDetailComponent` which hero to display
  by binding its `selectedHero` to the `hero` property of the `HeroDetailComponent`.
  The binding will look like this:
  
+makeExample('toh-3/ts/app/app.component.1.html', 'hero-detail-binding')(format='.')
:marked
  Putting square brackets around the `hero` property, to the left of the equal sign (=),
  makes it the *target* of a property binding expression.
  You must declare a *target* binding property to be an *input* property.
  Otherwise, Angular rejects the binding and throws an error.

  First, amend the `@angular/core` import statement to include the `Input` symbol.
+makeExample('toh-3/ts/src/app/hero-detail.component.ts', 'import-input', 'src/app/hero-detail.component.ts (excerpt)')(format='.')

:marked
  Then declare that `hero` is an *input* property by
  preceding it with the `@Input` decorator that you imported earlier.

+makeExample('toh-3/ts/src/app/hero-detail.component.ts', 'hero', 'src/app/hero-detail.component.ts (excerpt)')(format='.')

.l-sub-section
  :marked
    Read more about _input_ properties in the
    [Attribute Directives](../guide/attribute-directives.html#why-input) page.

:marked
  That's it. The `hero` property is the only thing in the `HeroDetailComponent` class.
  
+makeExample('toh-3/ts/src/app/hero-detail.component.ts', 'class')(format='.')

:marked
  All it does is receive a hero object through its `hero` input property and then bind to that property with its template.

  Here's the complete `HeroDetailComponent`.
+makeExample('toh-3/ts/src/app/hero-detail.component.ts', '', 'src/app/hero-detail.component.ts')

.l-main-section
:marked
  ## Declare _HeroDetailComponent_ in the _AppModule_
  Every component must be declared in one&mdash;and only one&mdash;Angular module.

  Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you can refer to it.
+makeExample('toh-3/ts/src/app/app.module.ts', 'hero-detail-import', 'src/app/app.module.ts')

:marked
  Add `HeroDetailComponent` to the module's `declarations` array.

+makeExample('toh-3/ts/src/app/app.module.ts', 'declarations', 'src/app/app.module.ts')(format='.')
:marked
  In general, the `declarations` array contains a list of application components, pipes, and directives that belong to the module.
  A component must be declared in a module before other components can reference it.
  This module declares only the two application components, `AppComponent` and `HeroDetailComponent`.
.l-sub-section
  :marked
    Read more about Angular modules in the [NgModules](../guide/ngmodule.html "Angular Modules (NgModule)") guide.

a#add-hero-detail
.l-main-section
:marked
  ## Add the _HeroDetailComponent_ to the _AppComponent_
  
:marked
  The `AppComponent` is still a master/detail view.
  It used to display the hero details on its own, before you cut out that portion of the template.
  Now it will delegate to the `HeroDetailComponent`.


  Recall that `hero-detail` is the CSS [`selector`](#selector "HeroDetailComponent selector")
  in the `HeroDetailComponent` metadata.
  That's the tag name of the element that represents the `HeroDetailComponent`.

  Add a `<hero-detail>` element near the bottom of the `AppComponent` template,
  where the hero detail view used to be.

  Coordinate the master `AppComponent` with the `HeroDetailComponent`
  by binding the `selectedHero` property of the `AppComponent`
  to the `hero` property of the `HeroDetailComponent`.
+makeExample('toh-3/ts/app/app.component.1.html', 'hero-detail-binding', 'app.component.ts (excerpt)')(format='.')
:marked
 Now every time the `selectedHero` changes, the `HeroDetailComponent` gets a new hero to display.

 The revised `AppComponent` template should look like this:

+makeExample('toh-3/ts/src/app/app.component.ts', 'hero-detail-template', 'app.component.ts (excerpt)')(format='.')

.l-main-section
:marked
  ## What changed?
  As [before](./toh-pt2.html), whenever a user clicks on a hero name,
  the hero detail appears below the hero list.
  But now the `HeroDetailView` is presenting those details.

  Refactoring the original `AppComponent` into two components yields benefits, both now and in the future:

  1. You simplified the `AppComponent` by reducing its responsibilities.

  1. You can evolve the `HeroDetailComponent` into a rich hero editor
  without touching the parent `AppComponent`.

  1. You can evolve the `AppComponent` without touching the hero detail view.

  1. You can re-use the `HeroDetailComponent` in the template of some future parent component.

  ### Review the app structure
  Verify that you have the following structure:

.filetree
  .file angular-tour-of-heroes
  .children
    .file src
    .children
      .file app
      .children
        .file app.component.ts
        .file app.module.ts
        .file hero.ts
        .file hero-detail.component.ts
      .file main.ts
      .file index.html
      .file styles.css
      .file systemjs.config.js
      .file tsconfig.json
    .file node_modules ...
    .file package.json

:marked
  Here are the code files discussed in this page.

  下面是我们在本章讨论的代码文件：

+makeTabs(`
  toh-3/ts/src/app/hero-detail.component.ts,
  toh-3/ts/src/app/app.component.ts,
  toh-3/ts/src/app/hero.ts,
  toh-3/ts/src/app/app.module.ts
  `,'',`
  src/app/hero-detail.component.ts,
  src/app/app.component.ts,
  src/app/hero.ts,
  src/app/app.module.ts
 `)

.l-main-section
:marked
  ## The road you’ve travelled
  
  ## 走过的路
  
  Here's what you achieved in this page:

  来盘点一下我们已经构建了什么。

  * You created a reusable component.

    我们创建了一个可复用组件

  * You learned how to make a component accept input.

    我们学会了如何让一个组件接收输入

  * You learned to declare the required application directives in an Angular module. You
  listed the directives in the `NgModule` decorator's `declarations` array.

    我们学会了在 Angular 模块中声明该应用所需的指令。
  只要把这些指令列在`NgModule`装饰器的`declarations`数组中就可以了。

  * You learned to bind a parent component to a child component.
  
  我们学会了把父组件绑定到子组件。

  Your app should look like this <live-example></live-example>.

  现在，应用应该变成了这样：<live-example>在线例子</live-example>。

.l-main-section
:marked
  ## The road ahead
  
  ## 前方的路
  
  The Tour of Heroes app is more reusable with shared components,
  but its (mock) data is still hard coded within the `AppComponent`.
  That's not sustainable.
  Data access should be refactored to a separate service
  and shared among the components that need data.
  
  通过抽取共享组件，我们的《英雄指南》变得更有复用性了，但在`AppComponent`中，我们仍然使用着硬编码的模拟数据。显然，这种方式不能“可持续发展”。
    我们要把数据访问逻辑重构到一个独立的服务中，并在需要数据的组件之间共享。

  You’ll learn to create services in the [next tutorial](toh-pt4.html) page.

  在[下一步](toh-pt4.html)，我们将学习如何创建服务。