2-7 경로배정에 대시보드 추가

경로배정에 대시보드 추가

경로배정은 다양한 뷰를 제공할 때 의미가 있다. 지금까지 만든 프로그램에 대시보드를 추가해 보자.

ng g component dashboard --flat

src/app/dashboard.component.ts

import { Component, OnInit } from '@angular/core'; import { Hero } from './hero' import { HeroService } from './hero.service';   @Component({   selector: 'my-dashboard',   template: '<h3>대시보드</h3>' }) export class DashboardComponent implements OnInit {     ngOnInit() {   }   }

 

모듈에 대시보드컴포너트 경로를 추가한다.

src/app/app.module.ts

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

대시보드 경로 추가

{   path: 'dashboard',   component: DashboardComponent },

대시보드 컴포넌트를 해당 모듈에서 사용하기 위해 declarations에 추가

declarations: [   AppComponent,   DashboardComponent,   HeroDetailComponent,   HeroesComponent ],

url “/”에 해당하는 경로를 추가

{   path: '',   redirectTo: '/dashboard',   pathMatch: 'full' },

 

 

app.component.ts파일에 대시보드 경로를 추가해 보자.

src/app/app.component.ts

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

결과 대시보드가 추가되었다. 영웅들을 클릭하면 영웅목록이 나타나고, 대시보드를 클릭하면 대시보드가 나타난다.