《angular2入门系列基础》——路由Route详解

前言

小编最近做ITOO前端项目的时候遇到路由跳转传参的一个问题，所以着手系统学习了Angular的路由的知识，现在分享给大家！

内容

路由的最基本的四个对象：

名称	功能介绍
Routes	路由配置，保存着url对应展示哪一个组件，及RouterOutlet展示组件
RouterOutlet	Html中标记路由内容呈现位置的占位符指令
Router	负责运行时执行路由的对象，调用navigate（）和navigateByUrl()方法导航到一个指定的路由
RouterLink	在Html中声明由导航用的指令
ActivatedRoute	当前激活路由对象，保存着当前路由的信息，路由地址，路由参数。

实战使用路由：
一：创建angular项目
1.创建项目的同时创建路由

<span style="color:#000000"><code>ng <span style="color:#4f4f4f">new</span> routeProject <span style="color:#880000">--routing </span></code></span>

配置如下图：
这里写图片描述

  2.创建普通的项目，然后手动添加路由ts文件：
这里写图片描述
   然后引入到app.module.ts文件中：

  两种方式下我选择了后一种，虽然第一种方式会自动创建路由文件，但是还引入了ngModule，看着非常凌乱，不如第二种方式，主要的任务就是配置Routes
注意:

<span style="color:#000000"><code>主module(一般指appModule）路由配置方式：
  RouterModule.forRoot(routes)； 
__________________________________________________

子module的路由配置方式：
  RouterModule.forChild(routes);</code></span>

二：添加组件product

<span style="color:#000000"><code>ng g c product</code></span>

三：将组件的配置到app.router.ts文件中：

<span style="color:#000000"><code>import { ProductComponent } from <span style="color:#009900">'./product/product.component'</span>;
export const appRoutes=[
    {<span style="color:#009900">path</span>:<span style="color:#009900">'product'</span>,<span style="color:#009900">component</span>:ProductComponent} 
]</code></span>

四:在app.component.html文件中配置路由插座，并且填写路由地址：

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">a</span> [<span style="color:#4f4f4f">routerLink</span>]=<span style="color:#009900">"['/']"</span>></span>主页<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> [<span style="color:#4f4f4f">routerLink</span>]=<span style="color:#009900">"['/product']"</span>></span>商品页<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">router-outlet</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">router-outlet</span>></span></code></span>

效果图：
点击主页：
这里写图片描述
点击商品页：url发生了变化，页面也随之变化：

RouterOutlet主要是指定要跳转到的组件模板的位置RouterOulet下面：
这里写图片描述
而Routerlink在模板中转换路由，他还可以带上路由参数：

<span style="color:#000000"><code>//<span style="color:#006666">1.</span>在路由路径中传参数
<a [routerLink]=<span style="color:#009900">"['/product'，1]"</span>>商品页</a><span style="color:#880000">
//2.在查询参数中传参数</span>
<a [routerLink]=<span style="color:#009900">"['/product']"</span> [queryParams]=<span style="color:#009900">"{id:1}"</span>>商品页</a></code></span>

第一传递参数的方法，需要修改Routes的path属性，将product的path改写成如下方式（RESTful风格）：

<span style="color:#000000"><code><span style="color:#000088">export</span> <span style="color:#000088">const</span> appRoutes=[
    {path:<span style="color:#009900">'product/:id'</span>,component:ProductComponent} 
]</code></span>

三：总结路由基本使用

这里写图片描述

从图中可以明显看出来：RouterOutlet和RouterLink是在模板页面中使用的方法，而Router和ActivatedRoute是在组件的控制器中使用的；而Routes是在模块的路由的文件中配置的，主要配置属性path和component。

结语

angular路由四个基本的路由对象已经介绍完毕，还有路由守卫，辅助路由，下文在给大家介绍，感谢浏览！

《angular2入门系列基础》——路由Route详解

猜你喜欢