我有一个带有路由器插座的根应用程序组件，并且路由从家庭模块路由加载，这些路由在子路由中使用与loadchildren的延迟加载 . 在家庭组件中有一个路由器插座，并且在家庭的所有子模块中都有延迟加载的路由器插座 . 路由工作正常，但子路由也在根路由器插座中加载 . Eg:- the component 'testCreateComponent' is loading with localhost:4200/test/create and also localhost:4200/create.
示例代码级别如下： -
app.component.html
<div>app</div>
<router-outlet></router-outlet>
app-routing.module.ts
export const APP_ROUTES: Routes = [
{path: '**', redirectTo: '', pathMatch: 'full'}
];
home.component.html
<div>home</div>
<router-outlet><router-outlet>
home-routing.module.ts
const routes: Routes = [{
path: '',
component: HomeComponent,
canActivate: [LoggedUserGuard],
canActivateChild: [AuthGuard],
children: [
{path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{
path: 'test',
loadChildren: () => testModule
},
{
path: 'dashboard',
component: DashboardComponent,
data: {
breadcrumb: 'Dashboard'
}
},
{
path: 'dummy',
loadChildren: () => dummyModule,
}
]
}];
testComponent.html
<div>Test</test>
<router-outlet></router-outlet>
test-routing.module.ts
const routes: Routes = [{
path: '',
component: TestComponent,
children: [
{path: '', component: ListComponent,
data: {
breadcrumb: 'List'
}},
{path: 'create', component: testCreateComponent},
{ path: 'detail/:id',
component: TestEditComponent,
}
]
}];