如何在角度 4 的嵌套模块之间路由？答案

【问题标题】：How to route between nested modules in angular 4?如何在角度 4 的嵌套模块之间路由？
【发布时间】：2017-06-09 09:05:24
【问题描述】：

所以我有如下四个模块：

|-app.module
    |-Home.module
       |-private.module
       |-public.module

AppModule 延迟加载 HomeModule 和 HomeModule 延迟加载 PrivateModule 和 PublicModule。

我已经为这些模块定义了我的路由如下：

app.routing.ts

import { NgModule} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './home/home.module#HomeModule' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule { }

Home.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'private', loadChildren: './../private/private.module#PrivateModule'},
  { path: 'public', loadChildren: './../public/public.module#PublicModule' }

];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

private.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PrivateComponent } from './private/private.component';

export const privateRoutes: Routes = [
   { path: '',component:PrivateComponent}
];

@NgModule({
  imports: [
    RouterModule.forChild(privateRoutes)
  ],
  exports: [RouterModule]
})
export class PrivateRoutingModule { }

public.routing.ts 与private.routing.ts 相同。

现在当我访问localhost:4200 时，它会正确加载 Home 组件。但是当我尝试访问 localhost:4200/private 或 localhost:4200/public 时，它会重新加载浏览器并仅加载 privateComponent。

我使用了两个路由器插座。一个在 app.component 中，另一个在 home.component 中。

我想在 HomeModules RouterOutlet 中加载私有组件，但它在 AppModules RouterOutlet 中加载它。

任何输入？

谢谢。

【问题讨论】：

我们看到的任何例子，也许是 plunker？

标签： javascript angular typescript lazy-loading angular2-routing

【解决方案1】：

我认为您可以将private 和public 路由定义为children 的homeModule。

Home.routing.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'private', loadChildren: './../private/private.module#PrivateModule'},
      { path: 'public', loadChildren: './../public/public.module#PublicModule' }
    ]
  }
]

那么你的私有/公共路由配置将会是这样的

const publicRoutes: Routes = [
  {
    path: '',
    component: PublicComponent
  }
]

【讨论】：

我已经更新了问题详情。请看一下

【解决方案2】：

我不确定你做错了哪一部分，这就是我要求举例的原因。

但是here one that works.

祝你好运。

【讨论】：