前言 |
小编最近做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>
- 1
配置如下图:
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路由四个基本的路由对象已经介绍完毕,还有路由守卫,辅助路由,下文在给大家介绍,感谢浏览!