[英]Angular routing not work correctly with lazy loading
In my Angular application, when I open link localhost:4200 (application serve on it), I want that my application redirect me on localhost:4200/notes. 在我的Angular应用程序中,当我打开链接localhost:4200(应用程序在其上提供服务)时,我希望我的应用程序将我重定向到localhost:4200 / notes上。 And I want to see data of notes-component, which is contained in main component.
我想查看notes-component的数据,该数据包含在主要组件中。
Example (text in html page): 示例(HTML页面中的文本):
App component
Main component
Notes-page component
But I only can see localhost:4200 (without redirect) and data of notes-component, without main component. 但是我只能看到localhost:4200(无重定向)和notes-component数据,没有主要组件。
Example (text in html page): 示例(HTML页面中的文本):
App component
Notes-page component
Why it works like this? 为什么这样工作? And how I can correct it?
我该如何纠正呢?
Files structure: 文件结构:
/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
Files: 档案:
app.routing.ts 应用程序路由
export const routing: ModuleWithProviders = RouterModule.forRoot([
{
path: '',
loadChildren: './containers/main/main.module#MainModule'
}
]);
app.component.html app.component.html
<h5>App component</h5>
<router-outlet></router-outlet>
main.module.ts 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 main.component.html
<h5>Main component</h5>
<main>
<router-outlet></router-outlet>
</main>
notes-page.module.ts notes-page.module.ts
export const routing: ModuleWithProviders = RouterModule.forChild([
{
path: '',
pathMatch: 'full',
component: NotesPageComponent
}
]);
notes-page.component.html notes-page.component.html
<h5>Notes-page component</h5>
Check this out: - app.routing.ts file should have MainComponent imported here and imported in app.module.ts: 检查一下:-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'
}
]
}
]);
You don't need main.module.ts 您不需要main.module.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.