모듈관리, 라우트규칙관리

first컴포넌트는 자연스럽게 하위컴포넌트 first-a, first-b들을 가지게 된다.( first컴포넌트도 app컴포넌트의 하위컴포넌트다. )

first컴포넌트아래에 얼마만큼의 하위컴포넌트가 있던지 first컴포넌트와 하위컴포넌트들을 관리하는 ng모듈을 만들어 관리하는것이 좋다.

first ng모듈에 컴포넌트들을 등록하고 first-routing모듈을 만들어 라우트규칙을 등록한다.

이렇게 하면 first ng모듈을 app ng모듈에 등록만 하면 된다.

앵귤러는 컴포넌트뷰시스템이므로 네비게이션은 컴포넌트전환을 의미한다.

예로 링크를 클릭하면 새로운 컴포넌트를 보여줘야하는 상황이면 새롭게 보여질 컴포넌트를 위해 미리 < router-outlet>< /router-outlet>엘리먼트를 준비해놓아야 한다.

---

라우트규칙 ```

Second

``` routerLink디렉티브에 라우트규칙에 있는 path를 지정한다. ```

Second

``` url의 루트를 지정할 수 있다.

const routes: Routes = [
  { path: 'second', component: SecondComponent },
];

라우트규칙에는 / 루트기호를 사용할 수 없다.
왜냐하면 라우트규칙은 하위규칙을 내부에 명시해야 하기 때문이다.

const routes: Routes = [
  { path: 'first', component: FirstComponent,
    children:[
      {path:'child-a', component:ChildAComponent},
      {path:'child-b', component:ChildBComponent}
    ] },
];

위와같이 루트로부터 하위라우트규칙이 명시되기때문이다.

  <ul>
    <li><a routerLink="child-a" >child-a</a></li>
    <li><a routerLink="child-b" >child-b</a></li>
    <li><a routerLink="../second" >to Second</a></li>
  </ul>

routerLink디렉티브에 상대주소의 라우트규칙을 사용할 수 있다.

  onClick(){
    this.router.navigate(['../second'], {relativeTo:this.route});
  }

navigater메소드를 사용하여 전환할때 상대주소를 사용하려면 NavigationExtras객체를 같이 전달해야 한다.

onClick(){
  this.router.navigate(['second']);
}

상대주소없이 사용해도 되네.....?