angular 路由嵌套相关问题?

Question

问题描述: 全部的路由以及子路由都定义在一个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代码以及界面效果

http://localhost:4200/demo

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

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

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

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

Answer 1

已解决, 使用loadChildren

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

Answer 2

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