angular6 路由懒加载的模块生成（原创）

发布时间：2018-12-13 19:19:13 修改时间：2018-12-13 19:19:13 阅读：7243 评论：0 0

现在前面：添加懒加载的方式有两种一种是自己手写，另一种是命令行，这里我都说一下

一、命令行形式

1、添加modoule

ng g m XXX --routing

例如：ng g module layout/device/monitoring/terminal-log-analysis --routing

2、创建模块

ng g component XXX

例如：ng g c layout/device/monitoring/terminal-log-analysis

3、routing-moudule  

找到

        const routes: Routes = [];

里面添加 {path : '' , component: TerminalLogAnalysisComponent}自身路径指向

注：

1.以上（XXX）为路径文件地址根目录为src 每次创建地址默认为src下开始目录

2.g 为generate 的缩写 c为Component缩写

二、手动添加

1、直接复制已经做好的依赖模块所有模块文件另起一个名字

2、更改所有模块相关名字

主要更改文件为 comment、module、routing组件




加载组件：

最后我们把做好的主键添加到路由：

首先我们找到组件的名字也就是XXX.routing.module.ts文件，就是之前命令行做的以来组建的第三步。看到路由中有个component组件声明就是我们想要的。

拿到之后在src目录下的layout组件的路由组件layout-routing.module.ts文件 打开它，同样找到

const routes: Routes = [];

添加在里面 格式要写成

const routes: Routes = [
    {
        path: '', component: LayoutComponent,
        children: [
            {path: 'device/monitoring/map', loadChildren: './device/monitoring/map/map.module#MapModule'},
        ]
    }
]

其中一级layoutComponent组件为进入后的默认组件。

好了 现在都设置好了理由 ，就可以在页面中做连接了

在入口页面layout里添加个任意标签写入属性,就可以访问了，如有错误，请指点。

[routerLink]="['device/monitoring/map',map.id]"

---