《Angular2路由跳转之代码跳转》
前言:最近小编在进行前端框架Angular2的最佳实践,现在对于其中的路由跳转有一些新的体会,在这里小编与君共勉。 正文:路由跳转 定义:针对于Angular构建的单页应用而言,页面跳转即为从一个配置项跳转到另一个配置项的行为。简而言之,就是配置项的相互跳转。 PS:Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另外一个页面。 类别:路由跳转分为指令、代码跳转两类。下面主要介绍代码跳转的实现过程。 实践目标:当点击的登录时可以跳转到另外一个页面,页面呈现“代码跳转” 具体步骤定位目录(以我为例,我想要在user文件夹下添加一个组件home)创建组件PS:我是用命令创建组件的,如果大家是手动创建的话,实现此跳转时需要手动修改 编辑home组件编辑home.component.html编辑home.component.tsps:仅仅加入了原《NiceFish》项目里组件跳转的效果:fade-in。根据需要编辑此文件 修改user-login组件修改user-login.component.html添加click事件:(click)=” Home()” 修改user-login.component.ts添加按钮“登录”所响应的click事件:Home() 修改根组件模块app.module.tsPS:在创建组件时,如果是手动创建,就执行此步骤,如果是使用命令自动创建的话,就自动忽略这一步骤 修改根组件路由app.route.ts引入home组件,添加home组件相应的路径 PS:至此就完成了使用代码跳转的路由跳转。 后记: 对于angular2的研究或许只是时间的问题。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |