angular2.x传参方式

记录angular2.x的几种传参方式

1.普通方式传递数据

再点击的按钮中直接注入[queryParams]="{key：value}"

浏览器效果

    

2.rest方式传参   

首先需要在路由的配置文件中预定义参数的名称：    

然后再routerLink中直接传递值

浏览器效果为

最后，通过params方法来获取参数的值：

activatedRout为在constructor（private activatedRout ：ActivatedRoute）

this.id= this.activatedRout.snapshot.params['id'];

3.路由配置传参 （传递一个数组或对象）

    首先在路由中配置需要传递的对象

其次在接收参数的目标页面定义初始参数

然后在构造函数中注入路由

最后在初始化函数中接收参数

最终打印出结果

4.通过实践绑定实现页面跳转传参

首先定义你需要传递的参数

其次在事件绑定的构造函数中的跳转时传入参数

但是这样会把data中的参数原样输出到浏览器的地址栏里面，这是决不允许的，解决办法为添加一个参数skiplocationonChange：false

 

传参方传参之后，接收方式2种接收方式如下：

1.snapshot

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

public data: any;

constructor( public route: ActivateRoute ) { };

ngOnInit(){

    this.data = this.route.snapshot.params['id'];

};

 

2.queryParams

 

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

    public data: any;

    constructor( public activeRoute:ActivateRoute ) { };

    ngOnInit(){

        this.activeRoute.queryParams.subscribe(params => {

        this.data = params['name'];

    });

};

这样就解决了我们需要通过事件绑定来实现页面之间跳转传参的问题。

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！