HTML52017. 3. 2. 22:20


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);
}





Posted by 삼스