[Angular-12]angular route - url로 parameter넘겨받기(ActivateRoute)

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

이번 프로젝트는 [Angular-11]angular route와 매우 강하게 연동되어 있으므로 해당프로젝트부터 시작해야한다.

이번에는 url로 파라메터로 넘겨받는 방법을 사용하도록 해보자.

// app.routing.ts
import {Routes, RouterModule} from '@angular/router';
import {OneComponent} from './one/one.component';
import {TwoComponent} from './two/two.component';

const routes: Routes = [
  {path: 'one/:pid', component: OneComponent},
  {path: 'two', component: TwoComponent}
];
export const routing = RouterModule.forRoot(routes);

일단 url을 파라메터로 쓰기위해서 url뒤에는 변수로 선언해준다.

변수로 쓰기위해서는 :을 붙혀주면 해당 url은 변수가 된다.

즉 위의 경우 <host>:<port>/one/<parameter>같은 형식으로 사용하게 되는 것이다.

OneComponent에서 이제 pid라는 파라메터를 사용하기 위해서 조금 수정하도록하자.

// one.component.ts
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.css']
})
export class OneComponent implements OnInit {

  private paramOne: string;

  constructor(route: ActivatedRoute) {
    this.paramOne = route.snapshot.params['pid'];
  }

  ngOnInit() {
  }

}

one 컴포넌트를 쓸것이므로 one.component.ts를 수정하여야한다.

일단 필드에 paramOne이라는 변수를 선언해준다. 물론 변수 이름은 여러분 마음이다.

그리고 생성자에서 변수를 받는데 이때 클래스 타입은 ActivateRoute이다.

그리고 이 때 route.snapshot.params를 사용해서 해당 url변수를 가져온다.

우리는 url에서 파라메터를 pid로 했으므로 pid로 선언한다.

<!--one.component.html-->
<h1 class="one">One Component:{{paramOne}}</h1>

이제 component 템플릿을 수정한다.

우리가 해당 타입스크립트 코드에서 paramOne으로 선언했으므로 paramOne으로 지정한다.

<!--app.component.html-->
<a [routerLink]="['/one',0]">One Route</a>
<a [routerLink]="['/two']">Two Route</a>
<router-outlet></router-outlet>

이제 마지막으로 routerLink를 수정해준다.

여기서 수정해야하는 이유는 간단한데 더이상 /one이라는 단독 url이 없다.

우리는 /one/:pid라는 url로 되어있으므로 해당 url에 맞게 사용해야한다.

여기서 pid를 우리는 0으로 지정해주는 것이다.

이제 실행해보도록 하자.

ng serve

이제 실행을 하고 One Route를 누르면 우리는 0으로 지정했으므로 자동으로 그 url로 간다.

url에 직접 타이핑을 해보자. 150을 쳐보자.

제대로 작동하는것을 확인할 수 있다.