小白入門angular-cli的第一次旅程（學習目標 1.路由的基礎知識 在路由時傳遞數據)

第一篇文里學習了在路由的基礎知識，了解了路由5個對象Routes,RouterLink,RouterOutlet,Router的寫法，這篇文里來學習如何在路由時傳遞數據, 還有如何使用ActivatedRoute的使用方法 

    傳遞數據方式主要有3種，說明：

            第一種：在查詢參數中傳遞數據

                          /product?id=1&name=2  =>  ActivatedRoute.queryParams[id]  

            第二種：在路由路徑中傳遞數據

                           {  path:  /product/:id  } =>/product/1 => ActivatedRoute.params[id]

            第三種：在路由配置中傳遞數據

·                            { path: /product, component: ProductComponent, data:[{ isProd:true }]}  =>  ActivatedRoute.data[0][isProd]

            一.在查詢參數中傳遞數據

                步一：在app.component.html中

                           <a [routerLink] = "['/product']"  [queryParams] = "{id:1}">產品ID</a>

                 步二：在product.component.ts中接收參數 

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

                            export class ProductComponent implements OnInit {

                                private productId : number ；

                             constructor( private routerInfo : ActivatedRoute ){    }

                                ngOnInit() {

                                      this.productId  = this.routerInfo.snapshot.queryparams["id"] ;

                                 }

                            }

                    步三：在product.component.html中

                               <p>產品Id是：{{productId}}</p>

            二.在路由路徑中傳遞數據

                   步一：在app-routing.module.ts

                              {  path : ' product / : id  ',  component : ProductComponent  }      

                    步二：在app.component.html中

                                <a [routerLink] = "['/product',1]">商品詳情</a>  

                    步三：在product.component.ts中

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

                                export class ProductComponent implements OnInit {

                                 private productId : number

                                 constructor( private routerInfo : ActivatedRoute ){   }

                                        ngOnInit() {

                                      this.productId = this.routerInfo.snapshot.params["id"]；

                                          }

                                  }