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实现表格排序方法
Jun 14 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP 代码规范小结
2012/03/08 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
javaScript语法总结
2016/11/25 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python二分查找详解
2015/09/13 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python 整数越界问题详解
2019/06/27 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
捐赠仪式主持词
2014/03/19 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL