2-5 경로배정(Routing)을 위한 컴포넌트 수정

경로배정(Routing)을 위한 컴포넌트 수정

Angular가 제공하는 컴포넌트 라우터를 적용해 보자.

서비스 분리에서 사용했던 소스를 변경해서 적용해 보자.

 

1. 먼저 AppComponent를 HeroesComponent로 바꾸어 보자.

절차는 다음과 같다.

l  app.component.ts파일을 heroes.component.ts파일로 이름 변경

l  Appcomponent클래스를 HeroesComponent클래스로 변경

l  app-root 셀랙터를 my-heroes로 변경

src/app/heroes.component.ts

import {Component, OnInit} from '@angular/core';   import { Hero } from './hero'; import { HeroService } from './hero.service';   @Component({   selector: 'my-heroes',   template: `     <h2>영웅 목록</h2>     <ul class="heroes">       <li *ngFor="let hero of heroes"         [class.selected]="hero === selectedHero"         (click)="onSelect(hero)">         <span class="badge">{{hero.id}}</span> {{hero.name}}       </li>     </ul>     <hero-detail [hero]="selectedHero"></hero-detail>   `,   styles: [`     .selected {       background-color: #CFD8DC !important;       color: white;     }     .heroes {       margin: 0 0 2em 0;       list-style-type: none;       padding: 0;       width: 15em;     }     .heroes li {       cursor: pointer;       position: relative;       left: 0;       background-color: #EEE;       margin: .5em;       padding: .3em 0;       height: 1.6em;       border-radius: 4px;     }     .heroes li.selected:hover {       background-color: #BBD8DC !important;       color: white;     }     .heroes li:hover {       color: #607D8B;       background-color: #DDD;       left: .1em;     }     .heroes .text {       position: relative;       top: -3px;     }     .heroes .badge {       display: inline-block;       font-size: small;       color: white;       padding: 0.8em 0.7em 0 0.7em;       background-color: #607D8B;       line-height: 1em;       position: relative;       left: -1px;       top: -4px;       height: 1.8em;       margin-right: .8em;       border-radius: 4px 0 0 4px;     }   `] }) export class HeroesComponent implements OnInit {   title = 'Tour of Heroes';   heroes: Hero[];   selectedHero: Hero;     constructor(private heroService: HeroService) { }     getHeroes(): void {     this.heroService.getHeroes().then(heroes => this.heroes = heroes);   }     ngOnInit(): void {     this.getHeroes();   }     onSelect(hero: Hero): void {     this.selectedHero = hero;   } }

<hero-detail [hero]="selectedHero"></hero-detail>는 오류날 수 있으므로 잠시 지운다.

 

2. 신규 AppComponent를 구현한다.

ng 명령어 : ng g component app

src/app/app.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'my-app',   template: `    <h1>{{title}}</h1>    <a routerLink="/heroes">영웅들</a>    <my-heroes></my-heroes>    ` }) export class AppComponent {   title = '영웅 여행'; }

src/app/app.module.ts

import { NgModule }       from '@angular/core'; import { BrowserModule }  from '@angular/platform-browser'; import { FormsModule }    from '@angular/forms';   import { AppComponent }        from './app.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroesComponent }     from './heroes.component'; import { HeroService }         from './hero.service';   @NgModule({   imports: [     BrowserModule,     FormsModule   ],   declarations: [     AppComponent,     HeroDetailComponent,     HeroesComponent   ],   providers: [     HeroService   ],   bootstrap: [ AppComponent ] }) export class AppModule { }

 

결과화면