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:
parent
c2e1b55f6c
commit
5bec58577f
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue