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

Posted 2022-03-26 杨晓风-linda

前言：

  最近小编在进行前端框架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的研究或许只是时间的问题。