[英]Angular routing not work correctly with lazy loading
在我的Angular应用程序中,当我打开链接localhost:4200(应用程序在其上提供服务)时,我希望我的应用程序将我重定向到localhost:4200 / notes上。 我想查看notes-component的数据,该数据包含在主要组件中。
示例(HTML页面中的文本):
App component
Main component
Notes-page component
但是我只能看到localhost:4200(无重定向)和notes-component数据,没有主要组件。
示例(HTML页面中的文本):
App component
Notes-page component
为什么这样工作? 我该如何纠正呢?
文件结构:
/app
/containers
/main
/notes-page
notes-page.routing.ts
notes-page.component.ts
notes-page.module.ts
main.routing.ts
main.component.ts
main.module.ts
app.routing.ts
app.component.ts
app.module.ts
档案:
应用程序路由
export const routing: ModuleWithProviders = RouterModule.forRoot([
{
path: '',
loadChildren: './containers/main/main.module#MainModule'
}
]);
app.component.html
<h5>App component</h5>
<router-outlet></router-outlet>
main.module.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: 'notes',
pathMatch: 'full'
},
{
path: 'notes',
loadChildren: './notes-page/notes-page.module#NotesPageModule'
}
]
}
]);
main.component.html
<h5>Main component</h5>
<main>
<router-outlet></router-outlet>
</main>
notes-page.module.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{
path: '',
pathMatch: 'full',
component: NotesPageComponent
}
]);
notes-page.component.html
<h5>Notes-page component</h5>
检查一下:-app.routing.ts文件应将MainComponent导入此处并导入到app.module.ts中:
export const routing: ModuleWithProviders = RouterModule.forRoot([
{
path: '',
component: MainComponent,
children: [
{ path: '', redirectTo: 'notes', pathMatch: 'full'},
{
path: 'notes',
loadChildren: './notes-page/notes-page.module#NotesPageModule'
}
]
}
]);
您不需要main.module.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.