[Angular]AppRoutingModule로 화면 주소 redirect하기2

app.module 은 AppRoutingModule 을 import받는다.

 

@NgModule({

  declarations: [

    AppComponent,

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    LayoutModule,

    SectionModule,

  ],

  exports : [AppComponent],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

AppRoutingModule을 보면 

routes 를 만들어forRoot에 넣고 import 받는다.(넣고 받는게 좀 이해가 안가긴함. export할때 넣고 하는게아님..)

그리고 그걸 다시 export 해서 내보낸다.

 

const routes: Routes = [

  {

    path : '',

    redirectTo : 'stopwatch',

    pathMatch : 'full',

  },

];

 

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

 

 

그리고 app.component.html은 아래와같다.

<app-header></app-header>

 

<app-section></app-section>

 

<app-footer></app-footer>

 

 

여기서 header와 footer는 layout module로 실행된다.

@NgModule({

  declarations: [

    HeaderComponent,

    FooterComponent,

  ],

 

  exports : [

    HeaderComponent,

    FooterComponent,

  ],

  imports: [

    CommonModule,

  ]

})

export class LayoutModule { }

 

 

그리고

<app-section></app-section> 을보자.

SectionModule은 StopwatchModule을 import 받는다.

그리고 import 받을때 routes를 만들어서 박아버린다.

아까 

{

    path : '',

    redirectTo : 'stopwatch',

    pathMatch : 'full',

  },

를 만들어서 넘겨줬으니(주소가 ''이면 stopwatch로 가거라)

이에 대응하는 놈은 박아준다. (stopwatch로 가면 component를 실행하거라)

{

    path : 'stopwatch',

    component : StopwatchComponent,

  }

이렇게!!

 

 

const routes: Routes = [

  {

    path : 'stopwatch',

    component : StopwatchComponent,

  }

];

 

@NgModule({

  declarations: [

    SectionComponent,

  ],

  imports: [

    CommonModule,

    StopwatchModule,

    RouterModule.forChild(routes),

  ],

  exports : [

    RouterModule,

    SectionComponent,

  ]

})

export class SectionModule { }

 

멘탈꺠진다