Question

所以我有四个模块如下：

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

AppModule延迟加载HomeModule和HomeModule Lazy加载PrivateModule＆amp; 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 Component。但是当我尝试访问localhost:4200/private或localhost:4200/public时，它会重新加载浏览器＆amp;只加载privateComponent。

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

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

任何输入？

感谢。

Answer 1

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

Home.routing.ts

homeModule

然后你的私人/公共路线配置就像

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

Answer 2

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

但是here one that works。

祝你好运。

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

2 个答案:

Home.routing.ts