快速入门！详解 Angular2 路由的分类及使用！

Posted 2021-04-26 Think体验设计

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。Angular 的路由器主要功能是让用户从一个视图导航到另一个视图。

 五个基础路由对象 

学习路由之前首先来了解一下这些基础的路由对象，下边将详细介绍各自的用法。

1. Routes：

路由配置，保存着哪个 url 对应展示哪个组件，以及在哪个 routerOuterlet 中展示组件；

2. RouterOutlet：

路由插座，在html中标记路由内容呈现位置的占位符指令；

3. routerLink：

在html中使用链接方式实现页面导航；

4. Router：

在ts文件中负责跳转路由操作，可以通过调用其 navigate()和navigateByUrl() 方法来导航到一个指定的路由；

5. ActivedRoute：

 创建路由模块，配置路由 

首先，通过命令行创建一个带有路由模块的应用：ng new projectName –routing；

再通过命令行创建两个组件：ng g component main;  ng g componentproduct;

 

1. 打开项目中app文件中的app-routing.module.ts 文件，此文件为整个应用的路由模块；

可以在 Routes 中配置路由；

下边示例中配置了四个路由分别为：默认路由，主页面路由，商品详情页面以及404页面；

注意：路由的定义顺序是刻意如此设计，配置路由时必须将能精准匹配到的路径放前边，将404页面放在最下边；

原因：路由会先从上面匹配，如果匹配不成功就会往下匹配

2. 路由插座

<router-outlet></router-outlet>  在 html 中标记挂载路由的占位容器，用来盛放加载的组件。

 路由导航跳转的方式 

通过上边的配置，可以通过手动修改路径来查看个页面路由是否设置成功，实际项目中我们不会去手动修改路径来导航到需要的页面，这时候就需要点击链接或者点击按钮等来实现页面的导航；下边就说一下通过链接和绑定事件的方式来实现路由跳转：

1. 通过页面链接的方式实现路由导航 routerLink：

2. 通过 ts 事件的方式实现路由导航 router 对象：

 重定向路由 

配置重定向路由： {path:'oldSrc',redirectTo:'/'newSrc',pathMatch:'full'};

 在路由时传递参数 

第一步：配置接收方路由模块中的 path 属性：{path:'product/:id',component:ProductComponent},

第二步：发送参数:

this.myRouter.navigateByUrl('/ product/1')

<a [routerLink] = "['/product',1]">跳转到商品详情页面</a>

第三步：接收参数

引入 ActivatedRoute 对象：import { ActivatedRoute } from '@angular/router';

声明 ActivatedRoute 类型变量：constructor(private routeInfo:ActivatedRoute) { }

获取参数：this.productId = this.routeInfo.snapshot.params["id"];

 子路由 

通过 children 属性来配置子路由，除了配置路由时有区别其他类似；

子路由的入口：

 辅助路由 

一个页面中可以同时定义多个插座，并且可以同时控制每个插座上显示的内容。

1. 辅助路由的路由插座定义和主路由一样，只是辅助路由比主路由多了一个 name 属性：用来指定辅助路由显示那几个组件。

2. 配置辅助路由路径：除了 path 和 component 属性外必须添加一个 outlet 属性，用来指定该路由显示在名字叫什么的插座上；

3. 配置入口参数：辅助路由的参数是一个对象，这个对象里面有一个属性 outlets，这个属性的值也是一个对象，该对象里面传一个 name 属性指定要显示的辅助路由的名字，值是该辅助路由需要显示的组件路径；

点击开始聊天，名字叫aux的辅助路由将显示路径为 chat 的组件；

点击取消聊天，也就是不希望辅助路由显示的时候将 name 设置为 null。

— END —

有什么想对作者说的吗？快来留言吧！

相关链接：

• 
  

THINK体验设计

微信ID：hw-Think

长按二维码关注有惊喜

点击“阅读原文”，进入华为云官网 !