docs(toh): remove unneeded directive from heroes.component

This commit is contained in:
Ward Bell 2016-05-19 00:57:35 -07:00
parent e91659ac13
commit a4bc455030
3 changed files with 7 additions and 7 deletions

View File

@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { Hero } from './hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
// #docregion metadata
@ -13,8 +12,7 @@ import { HeroService } from './hero.service';
selector: 'my-heroes',
// #enddocregion heroes-component-renaming
templateUrl: 'app/heroes.component.html',
styleUrls: ['app/heroes.component.css'],
directives: [HeroDetailComponent]
styleUrls: ['app/heroes.component.css']
// #docregion heroes-component-renaming
})
// #enddocregion heroes-component-renaming

View File

@ -3,14 +3,12 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { Hero } from './hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
templateUrl: 'app/heroes.component.html',
styleUrls: ['app/heroes.component.css'],
directives: [HeroDetailComponent]
styleUrls: ['app/heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];

View File

@ -544,7 +544,11 @@ figure.image-display
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
The revised component data looks like this:
We no longer display the `HeroDetailComponent` in the `HeroesComponent` template because we're navigating to it.
So we can remove it from the metadata `directives` array. The `directives` array is now empty so we delete it.
We might as well delete the `HeroDetailComponent` import statement too.
The revised component metadata looks like this:
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
:marked
Now we can see what's going on as we update the component class along the same lines as the dashboard: