angular 路由嵌套相关问题?

问题描述: 全部的路由以及子路由都定义在一个app-routing.module.ts里, 有没有什么可优化的方案?

如下是总路由ts文件实现代码

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

import { DemoComponent } from './demo/demo.component';
import { ProductComponent } from './demo/product/product.component';

const routes: Routes = [
  {
    path: 'demo',
    component: DemoComponent,
    children: [
      {
        path: 'product',
        component: ProductComponent
      }
    ]
  }
];

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

以下是html代码以及界面效果

image.png

http://localhost:4200/demo
image.png

http://localhost:4200/demo/pr...
image.png

image.png

现在想在 app-routing.module.ts 仅仅定义 path: 'demo' 路由, 而demo下的子路由定义在 demo-routing.module.ts. 让 app-routing.module.ts 去引用 demo-routing.module.ts

主要目的是不要把全部的路由以及子路由都定义在一个 app-routing.module.ts. 有没有什么实现思路?

在网上查了一下好像所有的案例都是把全部路由定义在一个文件里, 后期如果想对路由进行分类的话应该怎么处理?

阅读 2.1k
2 个回答

已解决, 使用loadChildren

const routes: Routes = [
  {
    path: 'demo',
    component: DemoComponent,
    loadChildren: () => DemoModule
  }
];

angular 是可以基于 Module 做隔离的,应该创建一个独立的 Module,路由部分也应在这个 Module 内部配置,然后在主 Module 中引入这个独立的 Module 并组织关系。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进