Angular2 - 3. Router

라우터를 사용하기 위한 설정

라우터 모듈 추가

src/app/app.module.ts

...

import { RouterModule } from '@angular/router';

...

@NgModule({

...

imports: [

...

RouterModule.forRoot([]),

...

],

...

})

라우터 패턴을 app.module.ts에 정의하는 것도 가능하지만,

여기서는 루트 라우터로 app.routing.ts 를 작성한다

라우팅 파일 추가

@angular/cli 에서 아직 route 추가를 지원하지 않기 때문에 직접 파일을 만들어준다.

src/app/app.routing.ts

export const appRoutes = [

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

]

여기에 앞으로 path 를 추가하여 라우터 패턴을 정의할 수 있다.

루트 라우팅에 대한 부분만 여기에 정의하고 각 앱은 각 디렉토리에 app-name.routing.ts 로 작성하여 module 에 포함시킨다.

app.routing.ts 정의된 내용을 보면 기본적으로 path가 없이 접근한 경우 /list 라는 경로로 리다이렉트 시켜준다는 내용이다.

라우터 패턴을 별도 파일에 작성하였으니 app.module.ts 에 불러와 사용하도록 내용을 다음과 같이 변경한다

src/app/app.module.ts

...

import { appRoutes } from './app.routing';

...

@NgModule({

...

imports: [

...

RouterModule.forRoot(appRoutes),

...

],

...

})

아직 http://localhost:8000/list 로 접근할 수 있는 모듈이 없으므로 이전에 작성한 list 콤포넌트에 모듈을 추가해준다

ng g module list

list 모듈에서 사용할 라우터도 직접 추가해주고 path 를 정의해준다.

src/app/list/list.routing.ts

import { ModuleWithProviders } from '@angular/core'

import { Routes, RouterModule } from '@angular/router'

import { ListComponent } from './list.component'

const listRoutes: Routes = [

{ path: 'list', component: ListComponent }

]

export const listRouting: ModuleWithProviders = RouterModule.forChild(listRoutes)

list 로 접근되는 요청에 ListComponent 를 라우팅 시켜준다는 내용이다.

app 모듈에 ListComponent 대신 ListModule을 포함시켜 준다.

src/app/app.module.ts

...

import { ListComponent } from './list/list.component';

import { ListModule } from './list/list.module';

...

@NgModule({

...

declarations: [

...

ListComponent,

...

],

...

imports: [

...

ListModule,

...

],

...

})

마지막으로 app.component.html 에서 특정 영역을 라우터 아울렛으로 동작하도록 다음과 같이 변경해준다.

src/app/app.component.html

<h1>

    {{title}}

</h1>

<router-outlet></router-outlet>

동일한 방법으로 post 라는 콤포넌트를 추가해보자

post는 URL 다음으로 id 를 넘겨받아 처리되도록 라우터를 조정해보도록 하자!

먼저 id 를 전달 받을 수 있도록 routing 파일을 다음과 같이 path를 하나 더 추가해준다.

src/app/post/post.routing.ts

const postRoutes: Routes = [

{ path: 'post', component: PostComponent },

{ path: 'post/:id', component: PostComponent }

]

export const postRouting: ModuleWithProviders = RouterModule.forChild(postRoutes)

테스트를 위해 app 콤포넌트에 링크를 몇개 추가해보자

src/app/app.component.html

<h1>

    {{title}}

</h1>

<ul>

    <li><a routerLink="/">/</a></li>

    <li><a routerLink="list">LIST</a></li>

    <li><a routerLink="post">POST</a></li>

    <li><a routerLink="post/1">POST 1</a></li>

    <li><a routerLink="post/2">POST 2</a></li>

    <li><a routerLink="post/3">POST 3</a></li>

</ul>

<router-outlet></router-outlet>

콤포넌트가 id 값을 받을 수 있도록 콤포넌트 파일을 수정한다.

src/app/post/post.component.ts

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute, Params } from '@angular/router';

@Component({

selector: 'app-post',

templateUrl: './post.component.html',

styleUrls: ['./post.component.css']

})

export class PostComponent implements OnInit {

postId: string = ''

constructor(

private route: ActivatedRoute

) { }

ngOnInit() {

this.route.params.subscribe(params => {

this.postId = params['id']

})

}

}

src/app/post/post.component.html

<p>

    post {{this.postId}} works!

</p>