angular2通过路由进行组件间传值

一、传参

在传值组件component.ts的constructor函数里面先声明router：

import { Router} from '@angular/router';

constructor(
public router: Router,
) {}

1.routerLink

单一参数：在<a routerLink=["/exampledetail",id]></a>中加routerLink进行跳转，其中/exampledetail是我设置的路由path，id是需要传递的参数。

多个参数：如果要传多个参数，则可以写成routerLink=["/exampledetail",{queryParams:object}] ,queryParams携带多个参数，这个参数的格式可以是自行组织的object，也可以分开多个参数写成routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];。

2.router.navigate

单一参数：this.router.navigate(['/exampledetail',id]); ，多用在调用方法里

多个参数：this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});

3.router.navigateByUrl

单一参数：this.router.navigateByUrl('/exampledetail/id');

多个参数：this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});

 

二、接受参数

在接受参数的组件里面的constructor函数里面声明：

import { ActivatedRoute } from '@angular/router';

  constructor(
    private activeRoute: ActivatedRoute
  ) { }

接受参数：

this.activeRoute.queryParams.subscribe(params => {
      this.uid = params['uid'];
    })