具有专用路由模块的子模块

时间:2019-08-16 23:52:43

标签: angular routing router

我的角度申请基于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。

有什么主意吗?

0 个答案:

没有答案