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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
Jquery获取radio选中的值
May 05 jQuery
从零开始学习搭建React脚手架项目
Aug 23 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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 应用程序安全防范技术研究
2009/09/25 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php微信开发接入
2016/08/27 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
原生JavaScript实现换肤
2021/02/19 Javascript
python mysqldb连接数据库
2009/03/16 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
物业总经理岗位职责
2014/02/28 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis