1. 程式人生 > >Angular路由

Angular路由

navi link lin let 使用 activate 激活 body 保存


Routes 路由配置,保存著哪個URL對應展示那個組件,以及在哪個RouterOutlet中展示組件。
RouteOutlet 在Html中標記路由內容呈現位置的占位符指令
Router 負責在運行時執行路由的對象,可以通過調用其navigate()和navigateByUrl()方法來導航到一個指定的路由。(在控制器裏用)
RouterLink 在Html中聲明路由導航用的指令。(在路由模板裏使用)
ActivatedRoute 當前激活的路由對象,保存著當前路由的信息,如路由地址,路由參數等。

在路由時傳遞數據
1.在查詢參數中傳遞數據
/product?id=1$name=2 => ActivatedRoute.queryPatams[id]

2.在路由的路徑中傳遞數據
{path:/product/:id} => /product/1 => ActivatedRoute.params[id]

3.在路由配置中傳遞數據
{path:/product, component: ProductComponent, data:[{isProd:true}]}
=> ActivatedRoute.data[0][isProd]

Angular路由