Angular6学习笔记17：在路由中传参数和接收参数

传参数

1.在需要传参数的组件的类文件（ts文件）中，构造方法中，声明对象：

constructor(private route: Router) {
  }

2.在路由中设置参数（有三种方式）

• routerLink属性

a.对于单一参数

<a [routerLink]="["/exampleRouterPath",id]"></a>

解释说明：exampleRouterPath是需要跳转的路由，id是需要传递的参数

b.对于多个参数

<a [routerLink]="["/exampleRouterPath",{queryParams:{id:1,name:'tom'}]" ></a>

解释说明：exampleRouterPath是需要跳转的路由，queryParams是传递的参数，类型是Object

• router.navigate

this.route.navigate(['exampleRouterPath'], {queryParams: {id: 0, name: 'tom'}});

解释说明：exampleRouterPath是需要跳转的路由，queryParams是传递的参数，类型是Object

• router.navigateByUrl

this.route.navigateByUrl('exampleRouterPath', {queryParams: {id: 0 , name:'tom'}});

解释说明：exampleRouterPath是需要跳转的路由，queryParams是传递的参数，类型是Object

接收参数

1.在跳转的路由的类文件中（.ts 文件）的构造方法中声明一个对象

constructor(private activeRoute: ActivatedRoute){}

2.接收参数

this.activeRoute.queryParams.subscribe(params => {
      console.log(params); // params 路由传的参数
    });