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 相关文章推荐
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
javascript中caller和callee详解
Aug 10 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
jquery datatable服务端分页
Aug 31 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
typescript配置alias的详细步骤
Aug 12 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
php 可变函数使用小结
2018/06/12 PHP
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python判断字符串是否是json格式方法分享
2017/11/07 Python
django中send_mail功能实现详解
2018/02/06 Python
Python切片索引用法示例
2018/05/15 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python 实现控制鼠标键盘
2020/11/27 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
SQL中where和having的区别
2012/06/17 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
英文演讲稿开场白
2014/08/25 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js