new-route.md

新增路由

Ng-Matero 目前提供了两个生成代码的原理图，ng g ng-matero:module 及 ng g ng-matero:page，其实这两个命令是对 Angular CLI ng g module 和 ng g component 的扩展优化。

模块

默认创建一个惰性模块。

$ ng g ng-matero:module <module-name>

通过以上命令会自动在 routes 目录添加一个业务模块，同时也会将模块声明添加到 routes.module 以及在 routes-routing.module 中添加一个路由定义。比如：

const routes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
+     { path: 'abc', loadChildren: () => import('./abc/abc.module').then(m => m.AbcModule) },
    ],
  }
]

路由定义默认添加到 AdminLayoutComponent 的子路由中，暂时无法设置其它插入位置。

对比原始 module

Ng-Matero 的 module 原理图等价于以下 ng CLI：

$ ng g module routes/abc -m=routes --route=abc

Angular CLI 8.x 版本有 bug，使用以上命令会报错，本人提了 issue 及 pr，Angular 团队已经针对该问题做了优化，但是不确定在哪个版本修复了该问题，大家可以自行检查。

但是 Angular 生成惰性模块时，会将路由添加声明到同级路由位置，例如：

const routes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [],
  },
+ { path: 'abc', loadChildren: () => import('./abc/abc.module').then(m => m.AbcModule) },
]

页面

在惰性模块中创建一个业务页面。

$ ng g ng-matero:page <page-name> -m=<module-name>

以上命令会在新建的惰性模块中添加组件声明，同时在惰性模块路由中添加一个路由声明。

动态组件

动态组件简单来说就是需要添加到 entryComponents 中去的组件，这一类组件常用于模态窗等，比如 Angular Material 中的 MatBottomSheet，MatDialog 等。

在业务页面添加一个动态组件。

$ ng g ng-matero:page <page-name>/<entry-component-name> -m=<module-name> -e=true

创建完成之后需要手动编写组件内容，常用于编辑操作的模态窗。在后续迭代中可能会增加相应的模态窗组件模板。

对比原始 component

使用原始的 component 只能创建组件，无法添加路由声明，比如以下方法只能在惰性模块中添加一个组件，其它声明需要手动添加。

$ ng g component routes/<module-name>/<page-name> -m=routes/<module-name>

ng-matero:page 和 component 的主要不同如下：

• 优化组件命名：为了防止组件重复，默认添加模块名前缀
• 优化组件生成路径：默认添加到 routes
• 将声明添加到常量数组，比如 COMPONENTS
• 在模块路由中添加组件的路由声明