# 新增路由

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

## 模块

默认创建一个惰性模块。

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

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

```diff
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：

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

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

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

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

## 页面

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

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

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

### 动态组件

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

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

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

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

### 对比原始 component

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

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nzbin.gitbook.io/ng-matero/zh-1/schematics/new-route.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.