Question

我正在尝试将角度延迟加载与子路由一起用于延迟加载模块，但是有些延迟加载路由不起作用我的结构如下

// app.routing.module.ts

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

const routes: Routes = [
  {
    path:'',
    loadChildren:'./frontend/frontend.module#FrontendModule'
  },
  {
    path:'admin',
    loadChildren:'./admin/admin.module#AdminModule'
  }
];

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

// admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { AdminComponent } from './admin.component';
import { RouterModule, Routes } from '@angular/router';
import {MaterialsModule} from './materials/materials.module';
import { DashboardComponent } from './dashboard/dashboard.component';

const adminRoutes:Routes = [
  { path: '', component: AdminComponent },
  { path: 'dashboard', component: DashboardComponent}
];    
@NgModule({
  declarations: [ 
    HeaderComponent,
    FooterComponent,
    AdminComponent,
    DashboardComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(adminRoutes),
    MaterialsModule

  ],
  exports: [RouterModule]

})
export class AdminModule {}

每当我点击网址 http://localhost:3000/admin

它会加载默认的管理组件

每当我点击http://localhost:3000/admin/dashboard时，它将内容加载到应用程序组件router-oulet中，而不是将其加载到管理模块路由器插座中。我不知道我的代码有什么问题

Answer 1

如果要设置仪表板组件的布局（父级），则应按以下步骤进行操作：

{ path: '', component: AdminComponent, 
children:[
 {path: 'dashboard' , component: DashboardComponent}
        ]
}

更新：我在孩子之后想念:。

Angular 7延迟加载路由不起作用

1 个答案: