Angular4路由導航（4）

1.相關對象

• 它加載與所請求路由相關聯的組件，以及獲取特定路由的相關數據。這允許我們通過控制不同的路由，獲取不同的數據，從而渲染不同的頁面。
  
• 這些路由在angular中的位置

• routes對象存在於模塊中，由一組配置信息組成，每個配置信息都至少包含兩個屬性，path屬性，component屬性用來指定相應的組件
  

• 根據瀏覽器的地址，當地址爲/user時，展示A 組件
  從組建A路由，當地址爲/order時展示B組件路由

2.路由傳遞數據

• 在查詢參數中傳遞數據

 /product？Id=1&name=2 => activatedRoute.queryParams[id]

• 在路由的路徑中傳遞參數（在定義路由 的路徑時就指定參數的名字，實際路徑中攜帶這個參數）

{path:/product/:id} =>/product1=> ActivateRoute.params[id]

• 然後再把product的值通過插值表達式顯示到頁面
• 如果改爲在Url 中獲取id直接將

//將queryParams[id]改爲Params[id]
ngOnInit(){
 this.productId=this.routeInfo.snapshot.params["id"];
}

• 在路由配置中傳遞參數

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

3.小結

• 路由可以說是angular甚至單頁應用的核心
• SPA（single page aplication）：單頁應用，瀏覽器不會跳轉，只替換頁面中部分內容
• 路由解決了多頁面跳轉的問題，根據傳入的參數不同指定不同的頁面