[Angular-14]anuglar child routing(자식 라우팅)

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

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

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

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

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

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

https://www.typescriptlang.org/

를 참조하라.

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

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

[Angular-11]angular 

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

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

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

이제 자식 라우팅을 해보도록 해보자.

자식 라우팅은 라우팅을 한데서 또 라우팅을 하는 개념이다.

이 개념을 넣어야 앞으로 계층 적인 구조를 만들 수 있다.

일단 자식 라우팅으로 쓰기위한 컴포넌트를 두개를 생산해보도록 하자.

일단 java와 python이라는 컴포넌트를 새로 제작하였다.

이제 이 컴포넌트를 라우팅에 붙히도록 해보자.

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

const routes: Routes = [
    {path: 'one/:pid', component: OneComponent},
    {
      path: 'two', component: TwoComponent, data: [{staticData: 'kukaro'}],
      children: [
        {path: 'java', component: JavaComponent},
        {path: 'python', component: PythonComponent}
      ]
    }
  ]
;
export const routing = RouterModule.forRoot(routes);

이번에는 two라는 컴포넌트가 two url에 자식들을 붙히도록 할 것이다.

이 때 자식으로 붙히도록 할것은 java컴포넌트와 python컴포넌트이다.

각각 java url과 python url을 붙히도록 할 것이다.

<!--two.component.html-->
<h1 class="two">Two Component:{{dataTwo}}</h1>
<a [routerLink]="['./java']">java</a><br>
<a [routerLink]="['./python']">python</a>
<router-outlet></router-outlet>

이제 two 컴포넌트에 붙힐것이므로 여기서 새로운 routerLink와 router-outlet을 붙혀주도록 하자.

이제 java 템플릿과 python 템플릿을 확인해 보도록 하자.

<!--java.component.html-->
<p>
  java works!
</p>

<!--python.component.html-->
<p>
  python works!
</p>

이제 테스트 해보도록 하자.

/two를 보면 해당 화면이 출력되는 것을 볼 수 있다.

이제 각각을 눌러보자

/two/java

를 보면 해당화면이 보이게 되는걸 알 수 있다.

또한 /two/python으로 하면 해당 화면을 볼 수 있다.