Angular2入坑指南——传参

前两天在群里问了很长时间如何传参的问题，好多人都没有回答，不知道是他们不会，还是不屑于回答，反正就是没人理我。我想，一定会有刚入坑的小伙伴对于如何传参这个问题绞尽脑汁，那么好，你们的福音来了，接下来就让老猴子我来为大家分析下，如何传参，以及单数据、多数据传参和接收参数的方式。

第一种是本地路由传参：

ng2最大的特点就是他的路由机制，非常NB啊有木有，ng1要写好多好多的控制器，还要用非常繁琐的语法去表达，ng2-ng4就不用老版本那样繁琐了，只需要在路由上面就可以轻松的传递本地参数。路由传参有三种方式：

① 第一种：routerLink

废话不多说，上代码：拿a标签为例

1) 单数据：

<a  routerLink=['./index',id]></a>

2) 多数据：

<a routerLink='./index' [queryParams]="{'name':'John'}"></a>

② 第二种：router.navigate

1) 单数据：

this.router.navigate(['./index',id]);

2) 多数据：

 this.router.navigate(['./index'],{queryParams:{'name':'John'}});

③ 第三种：router.navigateByUrl

1) 单数据：

this.router.navigateByUrl('./index/id');

2) 多数据：

this.router.navigateByUrl('./index?name=John');

对于路由传过去的参数如何接收呢，有两种方式可以接收参数，我们既可以使用网页快照的形式来获取数据，也可以使用queryParams来接收，就是怎么传过去的，就怎么接收过来，请看下面例子：

① 网页快照

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

    public data: any;

    constructor( public route: ActivateRoute ) { };

    ngOnInit(){

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

    };

② queryParams

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

    public sub: any;

    public data: any;

    constructor( public route: ActivateRoute ) { };

    ngOnInit(){

        this.sub = this.route.queryParams.subscribe(params => {

        this.data = params['name'];

    });

};

第二种是访问后台数据库传参

其原理是通过http请求后台数据，然后使用localstorage缓存到本地进行传参，反正怎么着都是要存到本地再传递参数，建议：数据量小的可以通过路径传参的方式进行数据交互，数据量大的，为了保证安全性，最好是使用localstorage传递参数。

以上是我总结的ng2传参方式，如有疏漏，欢迎大家来稿，也欢迎大家一同分享技术，共同进步。

秒客网

Angular2入坑指南——传参

相关文章