Question

我有一个github项目可以解释这个问题

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

这是来自管理模块路由

const routes: Routes = [{
  path: '',
  component: OverviewComponent
},
  {
    path: 'users',
    component: UserComponent
  }];

该项目的home组件在url中没有路径

http://localhost:4200，但它正在加载空路径（概述组件）在延迟加载的管理模块中定义。

据我了解，所有延迟加载的url路径都应为
http://localhost:4200/admin（应加载概述组件）。 http://localhost:4200/admin/users（应加载用户组件）

即使没有模块前缀，我也可以看到url路径正常工作。

http://localhost:4200（这是加载概述而不是首页组件）
http://localhost:4200/users（正在加载用户组件而不是抛出错误。）

谢谢。

Answer 1

在AdminModule中，您也应该在admin.component.html中。

您还需要为此创建AdminComponent。

供参考：https://www.tektutorialshub.com/angular-child-routes-nested-routes/

Answer 2

这是因为您已在应用程序模块本身中导入并声明了管理组件。如果要延迟加载，请按如下所示更改app.module.ts文件

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

和admin.module.ts如下

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [OverviewComponent, UserComponent]
})
export class AdminModule { }

延迟加载的Angular 6路由

2 个答案: