欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

3-2 路由_路由对象详解

程序员文章站 2022-07-02 17:18:57
1. Router app-routing.moudle.ts中配置 Routes 注意: 1. path中,不能用 / 开头。 2. Routes中放的是路有对象,路由对象可以有多个,每一个路由对象至少包含两个属性, 一个属性为path 即路由的路径,一个属性为路由下级的组件。 2. Router ......

1. router

  app-routing.moudle.ts中配置 routes

1 const routes: routes = [
2     {path: '', component: homecomponent},
3     {path: 'product', component: productcomponent}
4 ];

  注意:
    1. path中,不能用 / 开头。

    2. routes中放的是路有对象,路由对象可以有多个,每一个路由对象至少包含两个属性,

      一个属性为path 即路由的路径,一个属性为路由下级的组件。

2. routeroutlet占位符

  routeroutlet占位符存放在模块的组件模板中,声明路由配置中配置的组件模板将要放在什么位置

1 <router-outlet></router-outlet>

3. routerlink 链接

  一般在a标签中作为一个属性用,起到点击后链接页面的左右

1 <a [routerlink]="['/']">主页</a>
2 <a [routerlink]="['/product']">商品详情</a>

  注意:

    1. 此时里面的路径必须使用带 / 的,表示使用根路由。

    2. 使用routerlink时注意,参数是一个数组,数组中可以带有其他信息

    3. routes + routeroutlet + routerlink :可以组成一个跳转回路,完成所需的跳转。

4. router 控制器

  在主模板中:添加按钮和点击方式:

1 <input type="button" value="商品详情input" (click)="toproductdetails()">

  在控制器中,编写方法,方法中存放路由地址

1 export class appcomponent {
2     title = 'router';
3     constructor(private router: router) {
4     }
5     toproductdetails() {
6     this.router.navigate(['/product']);
7     }
8 }

  其中:

    构造器中可以获取到路由
    点击事件中使用路由的navigate()方法可以传入地址参数。

    routes + routeroutlet + router(控制器中) :可以组成一个跳转

5. activatedroute 

  activatedroute 获取激活路由对象中携带的参数
    1、构造器获取activatedroute激活路由对象

1 constructor(private routeinfo: activatedroute) { }

    2、初始化数据时获取参数中的数据

1 ngoninit() {
2     this.productid = this.routeinfo.snapshot.queryparams['id'];//从参数中获取id
3     this.productid = this.routeinfo.snapshot.params['id']; //从url中获取id
4 }