我的角度申请基于https://github.com/maximegris/angular-electron
他们通过路由器模块定义和加载模块的方式与您在互联网上可以找到的方式有所不同。
这是一个专用的路由过程模板,我决定以这种方式继续。
AppModule
会加载所有子分子,并且会自动建立路由。app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
HomeModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
app-routing.module.ts
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
component: PageNotFoundComponent
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
如您所见,HomeComponent
中没有定义routing-module
。
它在如下所示的子模块中定义。
home.module.ts
@NgModule({
declarations: [HomeComponent],
imports: [HomeRoutingModule]
})
export class HomeModule {}
home-routing.module.ts
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule {}
它按预期工作。
我的问题是,如何为 HomeModule
的子模块重现此过程
我的主页上有多个带有子菜单的视图。
我尝试按照下面的方法进行操作,但是找不到该页面。
home.module.ts
@NgModule({
declarations: [HomeComponent],
imports: [NewsModule, HomeRoutingModule]
})
export class HomeModule {}
home-routing.module.ts
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'news'
},
{
path: '**',
component: PageNotFoundComponent,
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule {}
news.module.ts
@NgModule({
declarations: [NewsComponent],
imports: [NewsRoutingModule]
})
export class NewsModule {}
news-routing.module.ts
const routes: Routes = [
{
path: 'news',
component: NewsComponent,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NewsRoutingModule {}
我的新闻模块html包含一个<router-outlet>
栏,所以这不是问题。我可以正确看到我的PageNotFound。
有什么主意吗?