《Angular2路由跳转之代码跳转》
来源:互联网 发布:中国导演 知乎 编辑:程序博客网 时间:2024/06/08 06:22
前言:
最近小编在进行前端框架Angular2的最佳实践,现在对于其中的路由跳转有一些新的体会,在这里小编与君共勉。
正文:
路由跳转
定义:
针对于Angular构建的单页应用而言,页面跳转即为从一个配置项跳转到另一个配置项的行为。简而言之,就是配置项的相互跳转。
PS:Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另外一个页面。
实现路由基本三部曲
1. 定义路由配置
2. 创建根路由模块
3. 添加<router-outlet></router-outlet>指令标签
核心工作流程
流程说明
首先,当用户在浏览器上输入了url之后,Angular将获取该URL并将其解析生成一个UrlTree实例
其次,在路由配置中寻找并激活与UrlTree实例匹配的配置项。
再次,为配置项中制定的组件创建实例
最后,将该组件渲染于路由组件的模板中<router-outlet>指令所在位置类别:
路由跳转分为指令、代码跳转两类。下面主要介绍代码跳转的实现过程。
实践目标:
当点击的登录时可以跳转到另外一个页面,页面呈现“代码跳转”
具体步骤
定位目录(以我为例,我想要在user文件夹下添加一个组件home)
创建组件
PS:我是用命令创建组件的,如果大家是手动创建的话,实现此跳转时需要手动修改
编辑home组件
编辑home.component.html
编辑home.component.ts
ps:仅仅加入了原《NiceFish》项目里组件跳转的效果:fade-in。根据需要编辑此文件
修改user-login组件
修改user-login.component.html
添加click事件:(click)=” Home()”
修改user-login.component.ts
添加按钮“登录”所响应的click事件:Home()
修改根组件模块app.module.ts
PS:在创建组件时,如果是手动创建,就执行此步骤,如果是使用命令自动创建的话,就自动忽略这一步骤
修改根组件路由app.route.ts
引入home组件,添加home组件相应的路径
PS:至此就完成了使用代码跳转的路由跳转。
后记:
对于angular2的研究或许只是时间的问题。
0 0
- 《Angular2路由跳转之代码跳转》
- 【Angular】路由跳转(代码跳转)
- angular2 router中的路由跳转navigate
- angular2 router中的路由跳转navigate
- ionic之路由跳转
- 《Angular路由跳转之指令跳转》
- 路由跳转
- Angular2之二级路由
- zf2 路由跳转方法
- angularJS路由跳转
- iOS控制器-路由跳转
- iOS - JLRoutes路由跳转
- iOS - JLRoutes路由跳转
- js实现 路由跳转
- angulaejs监听路由跳转
- ng2路由跳转
- js实现路由跳转
- angularJS路由跳转
- 三十六、SpringBoot配置属性之NOSQL
- Floodlight出现错误:Error! Check the fields specified for the flow.Make sure IPv4 fields are not mixed wi
- 参考博客进行SSM+websocket整合
- Java平台的脚本
- LeetCode(8)
- 《Angular2路由跳转之代码跳转》
- 我的IT两年
- Lecture 21 Parallel Algorithms II
- Ubuntu 让用户获得root权限(附修复I have no name !;sudo: unknown uid 1000: who are you?)
- Ubuntu 让用户获得root权限(附修复I have no name !;sudo: unknown uid 1000: who are you?)
- java中final关键字的使用
- LeetCode-96. Unique Binary Search Trees (JAVA)BST的数量
- 深入理解指针
- 代理模式