https://angular.io/docs/ts/latest/guide/router.html
라우트에 파라메터 적용하기
이전 예제에서 정의한 라우트정의를 다시 보자
{ path: 'hero/:id', component: HeroDetailComponent }
:id는 path에서 라우트파라메터의 슬롯을 생성한다. 이 경우 라우터는 이 슬롯에 hero의 id를 삽입한다.
heroid 15번의 상세화면으로 이동하고자 한다면 아래와 같이 접근하면 된다.
localhost:3000/hero/15
다음은 hero list를 표시하는 템플릿이다.
template: `
<h2>HEROES</h2>
<ul class="items">
<li *ngFor="let hero of heroes | async"
(click)="onSelect(hero)">
<span class="badge">{{ hero.id }}</span> {{ hero.name }}
</li>
</ul>
<button routerLink="/sidekicks">Go to sidekicks</button>
`
그리고 hero를 클릭했을 때 호출된 함수는 아래와 같다.
onSelect(hero: Hero) {
this.router.navigate(['/hero', hero.id]);
}
this.router를 사용하기 위해서는 생성자에서 Router를 inject해야 한다.
constructor(
private router: Router,
private service: HeroService
) {}
위와 같이 하면 Hero를 선택하면 HeroDetailComponent에 id값이 파라메터로 전달된다. 코드를 보면 알겠지만 파라메터는 배열로 전달된다.
HeroDetailComponent에서는 id값에 어떻게 접근할 수 있을까?
ActivatedRoute서비스로 가능하다.
ActivatedRoute : 라우팅정보를 위한 원스탑서비스이다.
라우팅서비스에서 얻어지는 ActivatedRoute는 다음과 같은 정보를 제공한다.
url: 라우트된 path의 obserserable로 라우트경로의 배열료 구성된다.
data : 라두트에서 제공되는 데이터 객체를 포함하는 observerable
params : 옵셔널파라메터
queryParams : 모든 라우트에서 유효한 query parameter
fragment : 모들 라우트에서 유효한 URL fragment
outlet : 라우트를 렌더할때 사용되는 RouterOutlet
routeConfig : origin path를 포함하는 라우트에 사용되는 설정정보
parent : 자식 라우트의 경우 부모의 ActivatedRoute
firstChild : 자식 라우트가 있을 경우 첫번째 ACtivatedRoute
children : 현재 라우트 이하 모든 라우트들
다음과 같이 Router, ActivatedRoute, Params를 import 해야 한다.
import { Router, ActivatedRoute, Params } from '@angular/router';
switchMap연산자를 import하면 Observerable 라우트 파라메터들을 처리할 수 있다.
import 'rxjs/add/operator/switchMap';
해당 모듈을 사용하기 위해 inject를 구현한다.
constructor(
private route: ActivatedRoute,
private router: Router,
private service: HeroService
) {}
이 후 ngOnInit에서 ActivatedRoute서비스를 통해서 파라메터에 접근이 가능하다.
ngOnInit() {
this.route.params
// (+) converts string 'id' to a number
.switchMap((params: Params) => this.service.getHero(+params['id']))
.subscribe((hero: Hero) => this.hero = hero);
}
파라메터가 Observerable로 제공되기 때문에 switchMap연산자를 id파라메터를 이름으로 접근하여 HeroService에 전달이 가능하다.
subscribe메서드로 id가 변경되면 감지해서 Hero 정보를 다시 셋할 수 있다.
이렇게 하면 id정보의 변경을 감지하여 화면은 유지한체 정보를 업데이트 할 수 있다.
shapshot의 경우는 non-observerable로 무조건 list에서만 detail로 진입한다면 사용이 가능하다.
ngOnInit() {
// (+) converts string 'id' to a number
let id = +this.route.snapshot.params['id'];
this.service.getHero(id)
.then((hero: Hero) => this.hero = hero);
}
