docs(Tutorial): minor repairs to toh-4

close #602
John's comments
Fix for https://github.com/johnpapa/angular2-tour-of-heroes/issues/41
This commit is contained in:
Ward Bell 2015-12-22 10:25:30 -08:00
parent c2e1b55f6c
commit 5bec58577f
2 changed files with 8 additions and 6 deletions

View File

@ -15,7 +15,7 @@ export class HeroService {
// See the "Take it slow" appendix
//#docregion get-heroes-slowly
getHeroesSlowly() {
return new Promise(resolve =>
return new Promise<Hero[]>(resolve =>
setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
);
}

View File

@ -156,7 +156,7 @@ code-example(format="." language="bash").
Will we need different mocked versions under test?
Not easy.
*What if ... what if ... Dude! We've got work to do!*
*What if ... what if ... Hey, we've got work to do!*
We get it. Really we do.
But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
@ -303,6 +303,10 @@ code-example(format="." language="html").
We pass our callback function as an argument to the promise's **then** method:
+makeExample('toh-4/ts/app/app.component.ts', 'get-heroes', 'app.component.ts (getHeroes - revised)')(format=".")
.l-sub-section
:marked
The [ES2015 arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
in the callback is more succint than the equivalent function expression and gracefully handles *this*.
:marked
Our callback sets the component's `heroes` property to the array of heroes returned by the service. That's all there is to it!
@ -382,10 +386,8 @@ code-example(format="." language="html").
### Appendix: Shadowing the parent's service
We stated [earlier](#child-component) that if we injected the parent `AppComponent` `HeroService`
into the `HeroDetailComponent`, *we must not add a providers array* like the following
to the `HeroDetailComponent`.
+makeExample('toh-4/ts/app/app.component.1.ts', 'providers', 'No! Don\'t do this!')
:marked
into the `HeroDetailComponent`, *we must not add a providers array* to the `HeroDetailComponent` metadata.
Why? Because that tells Angular to create a new instance of the `HeroService` at the `HeroDetailComponent` level.
The `HeroDetailComponent` doesn't want its *own* service instance; it wants its *parent's* service instance.
Adding the `providers` array creates a new service instance that shadows the parent instance.