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傳參方式，如有疏漏，歡迎大家來稿，也歡迎大家一同分享技術，共同進步。