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）：单页应用，浏览器不会跳转，只替换页面中部分内容
• 路由解决了多页面跳转的问题，根据传入的参数不同指定不同的页面