《Angular2路由跳转之代码跳转》

前端之家收集整理的这篇文章主要介绍了《Angular2路由跳转之代码跳转》前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

最近小编在进行前端框架Angular2的最佳实践,现在对于其中的路由跳转有一些新的体会,在这里小编与君共勉。

正文:

路由跳转

定义:

针对于Angular构建的单页应用而言,页面跳转即为从一个配置项跳转到另一个配置项的行为。简而言之,就是配置项的相互跳转

PS:Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另外一个页面

类别:

路由跳转分为指令、代码跳转两类。下面主要介绍代码跳转的实现过程。

实践目标:

当点击的登录时可以跳转到另外一个页面页面呈现“代码跳转

具体步骤

定位目录(以我为例,我想要在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的研究或许只是时间的问题。

原文链接:https://www.f2er.com/angularjs/147444.html

猜你在找的Angularjs相关文章