Angular2之二级路由详解


Posted in Javascript onAugust 31, 2018

写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本。

1的版本更多的是整合,按照模块来区分,并没有做更细的划分,而2的版本中,在创建时模块组件时就已经有了很好的区分,每个模块单独管理各自的组件,在组件中也是各自管理自己的样式,效果。

在以往1的版本中,要整合路由是十分容易的,无论是一级或者二级路由都可以写在一个文件中

但是在2中则是将路由写在上层模块中,一般app为主模块,定义一个app-routing.module.ts的主路由。

基本的Angular 2 入门在前面一篇里面也有所提及

这里就从创建项目开始:

第一步:创建一个基于angular-cli的项目

ng new project-name //项目的名称

创建完成后就是一个基本的项目框架,其中包括根模块、根组件等,在根模块中,原本所定义的路由是在其中的,但在一般的工程项目中,更多的习惯于将路由重构为模块。

详细可参考Angular 2 文档高级教程中的>路由与导航,

第二步:此时可以创建一个app-routing.module.ts 文件来放总路由,其中的redirectTo为打开项目时的路由定向。

Angular2之二级路由详解

第三步:创建一级模块,在项目中打开命令窗口,输入

ng g module my-new-module //模块名称

假设此处我输入的为ng g module user,则会直接生成以下这些文件

Angular2之二级路由详解

此时在app.module.ts 中也会生成

Angular2之二级路由详解

第四步:创建组件

ng g component my-new-component //组件名称

这里我创建了两个组件分别叫做usermanagement & adduser,同样生成以下文件

Angular2之二级路由详解

在user.module.ts中也会生成二级组件

Angular2之二级路由详解

第五步:书写模块中的路由配置

仍然是写在user.module.ts 中,在注入组件之后,写入二级路由forChild,此处必不可少的是path的空白链接!!不然会报user的错,相当于一个父层的定向

Angular2之二级路由详解

还有就是最后所显示的位置,一级路由就写在app.component.html中

Angular2之二级路由详解

二级路由则写在对应的父层页面上,我这里就是写在user.component.html中

Angular2之二级路由详解

基本的步骤就是这些,在长期使用Angular 1之后,一直改不过来思维,但其实Angular 2的版本更为清晰的告诉我们每个模块所管理的内容,更容易掌握。

以上这篇Angular2之二级路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
jQuery常用选择器详解
Jul 17 jQuery
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
You might like
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
php批量删除操作代码分享
2017/02/26 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
树结构之JavaScript
2017/01/24 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python导入txt数据到mysql的方法
2015/04/08 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python主线程捕获子线程的方法
2018/06/17 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python如何实现的二分查找算法
2020/05/27 Python
python中如何进行连乘计算
2020/05/28 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
ktv收银员岗位职责
2013/12/16 职场文书
幼儿教育感言
2014/02/05 职场文书
文字自荐书范文
2014/02/10 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
档案信息化建设方案
2014/05/16 职场文书
组织鉴定材料
2014/06/02 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2014年变电站工作总结
2014/12/19 职场文书
社区党支部公开承诺书
2015/04/29 职场文书