on
[Angular]AppRoutingModule로 화면 주소 redirect하기2
[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은 아래와같다.
여기서 header와 footer는 layout module로 실행된다.
@NgModule({
declarations: [
HeaderComponent,
FooterComponent,
],
exports : [
HeaderComponent,
FooterComponent,
],
imports: [
CommonModule,
]
})
export class LayoutModule { }
그리고
을보자.
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 { }
멘탈꺠진다
from http://lifedeveloper.tistory.com/141 by ccl(A) rewrite - 2021-10-27 20:26:09