[Angular-13]angular route - 정적 data 사용하기

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

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

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

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

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

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

https://www.typescriptlang.org/

를 참조하라.

이 포스팅은 전 포스팅과 전전 포스팅에 강하게 의존되어 있다.

따라서 두 포스팅을 참가하여 이어서 하기를 바란다.

[Angular-11]angular 

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

위에 이어서 하기를 바란다.

이번에는 정적 데이터를 처리하기로 해보자.

무슨 말이냐면 url로 이어받는 변수가 아닌 그냥 내부에서쓰는 변수를 가져다 쓰는것이다.

일반 변수와의 차이점이라면 해당 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, data: [{staticData: 'kukaro'}]}
  ]
;
export const routing = RouterModule.forRoot(routes);

이번에는 two.component.ts를 이용해서 만들어 보도록 하자.

여기서 각각의 Routes변수에 data속성으로 한다.

data는 무조건 배열형태만 사용할 수 있으며 배열로서 선언해야한다.

또한 안의 값은 여러분이 넣고 싶은 데이터를 넣으면 된다.

가령 위의 경우 정적 데이터로 staticData를 선언한 것이다. 그 값으로 kukaro로 선언하였다.

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

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

  private dataTwo: string;

  constructor(route: ActivatedRoute) {
    this.dataTwo = route.snapshot.data[0]['staticData'];
  }

  ngOnInit() {
  }

}

two.component.ts에 사용할 변수를 선언한다. 여기서 dataTwo라는 변수에 정적 데이터를 연결할 것이다.

그리고 생성자에서는 저번에 ActivatedRoute클래스를 사용했던것 처럼 이번에도 사용한다.

다만 이번에는 호출할 때 route.snapshot.data로 선언을 한다.

다만 배열로 값이 되어 있으므로 그 원소를 선언해서 값을 가져가 주면된다.

위의 경우 배열의 원소가 하나밖에 없기에 0번으로 호출하였다. 그리고 우리가 쓰기로 한 데이터의 이름으로 선언해 준다.

우리는 staticData를 위에서 선언했으므로 그 데이터를 가져오면 된다.

<!--two.component.html-->
<h1 class="two">Two Component:{{dataTwo}}</h1>

이제 호출하기 위해서 위의 템플릿에서 해당 데이터를 가져오면된다.

그럼 이제 실행해보자.

보다시피 정적데이터가 바인딩 된걸 확인할 수 있다.