用户登录

打开 Demo,里面有一个 Admin 链接,访问它会重定向到登录页面,按一下登录,然后再打开 Admin。现在我想把 Admin 相关的东西单独放在一个模块里,然后配置路由,延迟加载这个模块。

Admin 模块

先去生成一个模块,ng generate 一个 module 放在 modules/demo/admin 目录的下面,加上一个 --routing 选项创建一个路由模块,再用 --module 选项设置一下要把这个模块放在哪个模块里,可以放在 demo 模块里。

回到项目,在 modules,demo,admin 的下面,可以找到刚才创建的这个 Admin 模块,还有一个对应的路由模块,就是这个 AdminRoutingModule,在 Admin 模块里已经导入了这个 AdminRoutingModule 模块。

另外还更新了一下 Demo 模块,在这个模块里导入了 Admin 模块。

清理 Demo 模块

下面可以去掉在 Demo 模块里导入的 PostModule,还有 declarations 里的 AdminComponent 组件,还有 AdminDashboardComponent 组件,因为这两个组件一会要把它们放在 Admin 模块里。

删除掉文件顶部不需要的导入。

清理 Demo 路由模块

然后打开 Demo 的路由模块,DemoRoutingModule,可以把这里的这个 admin 路由放在 Admin 模块的路由模块里,剪切一下这条路由。这样上面导入的这些跟这个剪切掉的路由相关的东西现在就可以去掉了。

Admin 路由

打开 Admin 模块的路由模块,把剪切的路由放在这个 routes 里面。有些东西的下面会出现红线,因为在这个文件里还没有导入它们,选中它,按一下 command + . 选择这个 Add all missing imports ,这样编辑器会帮我们自动导入所有需要的东西。

Lazy loading

这个路由可以修改一下,去掉 admin,再打开 Demo 路由模块。在这里再定义一条路由,路由的 path 是 admin ,添加一个 loadChildren 属性,可以延迟加载 Admin 模块,提供一个方法,然后 import 的东西是 ./admin/admin.module ,接着用个 then, 方法有个 module ,要延迟加载的是 AdminModule 模块。

这样只有在访问 admin 这个路由地址的时候,应用才会加载需要的 AdminModule 模块。

Admin 模块

打开 Admin 模块,在这个模块的导入里需要再添加一个 PostModule,这是因为在 Admin 路由模块里定义的一条路由里面,用到了 PostComponent 组件,这个组件是在 PostMoudle 模块里,所以要在这个 Admin 模块导入这个 PostModule 模块。

在模块的 declarations 里面,还得再把模块里的组件添加进来, Admin 模块里有 AdminComponent,还有 AdminDashBoardComponent。

预览

回到浏览器再试一下,打开 Demo,会载入 DemoModule 模块。再打开 Admin,Login 之后,再打开 Admin。 你会发现并没有载入 Admin 模块。

这个是因为,在这个 Demo 模块里面,在它的 imports 里面,导入了 AdminModule ,这个模块现在要 Loay load,就是延迟加载,所以可以从模块的 imports 里面去掉 AdminModule ,再删除掉上面的没用的 import AdminModule 的代码。

然后回到浏览器再试一下。

打开 Demo,然后点击 Admin,虽然重定向到了登录页面,但是浏览器已经载入了 Admin 模块。

延迟加载 Admin 模块《 Angular:异步路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点