angular-docs-cn/aio/content/tutorial/toh-pt3.md

158 lines
6.3 KiB
Markdown
Raw Normal View History

2017-11-06 13:02:18 -05:00
# Master/Detail Components
2017-11-06 13:02:18 -05:00
At the moment, the `HeroesComponent` displays both the list of heroes and the selected hero's details.
2017-11-06 13:02:18 -05:00
Keeping all features in one component as the application grows will not be maintainable.
You'll want to split up large components into smaller sub-components, each focused on a specific task or workflow.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
In this page, you'll take the first step in that direction by moving the hero details into a separate, reusable `HeroDetailsComponent`.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
The `HeroesComponent` will only present the list of heroes.
The `HeroDetailsComponent` will present details of a selected hero.
2017-11-06 13:02:18 -05:00
## Make the _HeroDetailComponent_
2017-11-06 13:02:18 -05:00
Use the Angular CLI to generate a new component named `hero-detail`.
2017-11-06 13:02:18 -05:00
<code-example language="sh" class="code-shell">
ng generate component hero-detail
</code-example>
2017-11-06 13:02:18 -05:00
The command scaffolds the `HeroDetailComponent` files and declares the component in `AppModule`.
2017-11-06 13:02:18 -05:00
### Write the template
2017-11-06 13:02:18 -05:00
Cut the HTML for the hero detail from the bottom of the `HeroesComponent` template and paste it over the generated boilerplate in the `HeroDetailComponent` template.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
The pasted HTML refers to a `selectedHero`.
The new `HeroDetailComponent` can present _any_ hero, not just a selected hero.
So replace "selectedHero" with "hero" everywhere in the template.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
When you're done, the `HeroDetailComponent` template should look like this:
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.html" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
</code-example>
2017-11-06 13:02:18 -05:00
### Add the *@Input() hero* property
2017-11-06 13:02:18 -05:00
The `HeroDetailComponent` template binds to the component's `hero` property
which is of type `Hero`.
2017-11-06 13:02:18 -05:00
Open the `HeroDetailComponent` class file and import the `Hero` symbol.
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts"
region="import-hero" title="src/app/hero-detail/hero-detail.component.ts (import Hero)">
</code-example>
2017-11-06 13:02:18 -05:00
The `hero` property
[must be an _Input_ property](guide/template-syntax#inputs-outputs "Input and Output properties"),
annotated with the `@Input()` decorator,
because the _external_ `HeroesComponent` [will bind to it](#heroes-component-template) like this.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding">
</code-example>
2017-11-06 13:02:18 -05:00
Amend the `@angular/core` import statement to include the `Input` symbol.
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (import Input)" linenums="false">
</code-example>
2017-11-06 13:02:18 -05:00
Add a `hero` property, preceded by the `@Input()` decorator.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/hero-detail/hero-detail.component.ts" region="input-hero" linenums="false">
</code-example>
2017-11-06 13:02:18 -05:00
That's the only change you should make to the `HeroDetailComponent` class.
There are no more properties. There's no presentation logic.
This component simply receives a hero object through its `hero` property and displays it.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
## Show the _HeroDetailComponent_
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
The `HeroesComponent` is still a master/detail view.
2017-11-06 13:02:18 -05:00
It used to display the hero details on its own, before you cut that portion of the template. Now it will delegate to the `HeroDetailComponent`.
2017-11-06 13:02:18 -05:00
The two components will have a parent/child relationship.
The parent `HeroesComponent` will control the child `HeroDetailComponent`
by sending it a new hero to display whenever
the user selects a hero from the list.
2017-11-06 13:02:18 -05:00
You won't change the `HeroesComponent` _class_ but you will change its _template_.
2017-11-06 13:02:18 -05:00
{@a heroes-component-template}
2017-11-06 13:02:18 -05:00
### Update the _HeroesComponent_ template
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
The `HeroDetailComponent` selector is `'app-hero-detail'`.
Add an `<app-hero-detail>` element near the bottom of the `HeroesComponent` template, where the hero detail view used to be.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
Bind the `HeroesComponent.selectedHero` to the element's `hero` property like this.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/heroes/heroes.component.html" region="hero-detail-binding" title="hero-detail.component.html (HeroDetail binding)">
</code-example>
2017-11-06 13:02:18 -05:00
`[hero]="selectedHero"` is an Angular [property binding](guide/template-syntax#property-binding).
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
It's a _one way_ data binding from
the `selectedHero` property of the `HeroComponent` to the `hero` property of the target element, which maps to the `hero` property of the `HeroDetailComponent`.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
Now when the user clicks a hero in the list, the `selectedHero` changes.
When the `selectedHero` changes, the _property binding_ updates `hero`
and the `HeroDetailComponent` displays the new hero.
2017-11-06 13:02:18 -05:00
The revised `HeroesComponent` template should look like this:
2017-11-06 13:02:18 -05:00
<code-example path="toh-pt3/src/app/heroes/heroes.component.html"
title="heroes.component.html" linenums="false">
</code-example>
2017-11-06 13:02:18 -05:00
The browser refreshes and the app starts working again as it did before.
2017-03-31 19:57:13 -04:00
## What changed?
2017-11-06 13:02:18 -05:00
As [before](tutorial/toh-pt2), whenever a user clicks on a hero name,
the hero detail appears below the hero list.
2017-11-06 13:02:18 -05:00
Now the `HeroDetailComponent` is presenting those details instead of the `HeroesComponent`.
2017-11-06 13:02:18 -05:00
Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
2017-11-06 13:02:18 -05:00
1. You simplified the `HeroesComponent` by reducing its responsibilities.
1. You can evolve the `HeroDetailComponent` into a rich hero editor
2017-11-06 13:02:18 -05:00
without touching the parent `HeroesComponent`.
2017-11-06 13:02:18 -05:00
1. You can evolve the `HeroesComponent` without touching the hero detail view.
2017-11-06 13:02:18 -05:00
1. You can re-use the `HeroDetailComponent` in the template of some future component.
2017-11-06 13:02:18 -05:00
## Final code review
2017-11-06 13:02:18 -05:00
Here are the code files discussed on this page and your app should look like this <live-example></live-example>.
<code-tabs>
2017-11-06 13:02:18 -05:00
<code-pane title="src/app/hero-detail/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail/hero-detail.component.ts">
</code-pane>
2017-11-06 13:02:18 -05:00
<code-pane title="src/app/hero-detail/hero-detail.component.html" path="toh-pt3/src/app/hero-detail/hero-detail.component.html">
</code-pane>
2017-11-06 13:02:18 -05:00
<code-pane title="src/app/heroes/heroes-component.html" path="toh-pt3/src/app/heroes/heroes.component.html">
</code-pane>
</code-tabs>
## Summary
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
* You created a separate, reusable `HeroDetailComponent`.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
* You used a [property binding](guide/template-syntax#property-binding) to give the parent `HeroesComponent` control over the child `HeroDetailComponent`.
2017-03-31 19:57:13 -04:00
2017-11-06 13:02:18 -05:00
* You used the [`@Input` decorator](guide/template-syntax#inputs-outputs)
to make the `hero` property available for binding
by the external `HeroesComponent`.