angular2 routerlink 如何传参-CFANZ编程社区

问题的起源：
<a class="ori-text" [routerLink]="['/member/edit', i.id]">编辑</a>

 import {Component,OnInit} from '@angular/core';
 import {Location} from '@angular/common';//引入依赖
 
 export class testComponent implements OnInit {
  constructor(public Location: Location) {//引入一下
  }

   ngOnInit() {
this.Location.path();//愉快的的到了你要的东东了 不过格式有点怪 大概长这样：'/code/edit/57299' 然后一般是取后面的数字出来
//这边就拿到url地址了
}

嗯，上面说到的是比较简单的模式，传递了一个参数，而实际操作中可能会遇到需要传递多个，下面以两个参数的做说明
一切的缘由来自这个需要跳转的url：
[routerLink]="['/code/edit', i.id]" 这里配置的和你路由中配置的跳转是匹配上的（重点）
[queryParams]="{ id : i.id, code: i.code }" 这个是我需要传递的参数后面呈现效果就是？XXXX重点）
结果展示——/code/edit/57299?id=57299&code=695152180143

 <a class="ori-text" [routerLink]="['/code/edit', i.id]" [queryParams]="{ id : i.id, code: i.code }">编辑</a>

话说怎么把重点加粗和标红呢？

ok，如果你以为这样就算完成了万里之路，我只能说还需要下面的辅助：
下面需要做的工作是把url中的参数获取到，当然按照方案一，我们也可以一顿操作猛如虎，不过我们还是坚持两者择一选其优吧

now: any = {
        page: 1,
        keywords: '',
        status: 0,
    }
ngOnInit() {
        //获取url中的参数
       let pid = '';
        this._activeRouter.queryParams.subscribe(params=> {
           this.now.code = params.code;//获取跳转前的条形码
            //console.log('路由参数',params);
            pid = params.id; //获取当前商品的id
            this.getProduct(params.id);//查询当前id的商品详情 该函数需要自己声明，参考时可以去掉
            this.getList();
        });

    }

然后这个里面你需要在顶部引入一些辅助：
具体如下

import {ActivatedRoute} from "@angular/router"; //引入依赖库 必须

constructor(private _api: ApiRequest,
                public _activeRouter: ActivatedRoute, //必须
                private _router: Router) {
    }

新整理说明

//目前我比较常用的有两种形式：
1.http://localhost:9110/tool/foster/detail/14674 2.http://localhost:9110/tool/product/4567?task_id=14674&foster_care_id=4567

上面两种的界面如下：

<a [routerLink]="['/tool/pet/detail', taskDetail.member_pet_id]" class="ori-text tl-font-14">详情</a>

<a [routerLink]="['/tool/product', taskDetail.foster_care.foster_care_id]" [queryParams]="{ task_id : taskDetail.task_id, foster_care_id: taskDetail.foster_care.foster_care_id }" class="long set-btn">中途消费</a>

这里是获取对应传递参数的地方，初始化的时候获取url中的参数。注释掉的是获取直接放到后面的id

ngOnInit(): void {
        /*this._activeRoute.params
            .switchMap((params: Params) => Promise.resolve(params['id']))
            .subscribe(id => {
                this.foster_care_id = Number(id);
                this.getDetail();
            });*/

        this._activeRoute.queryParams.subscribe(params=> {
            this.task_id = params.task_id;
            this.foster_care_id = Number(params.foster_care_id);
            this.getDetail();
        });
    }