控制檢視應用狀態的物件

除錯階段，更新元件和路由的時候，需要重新執行，瀏覽器更新是沒有效果的，只有靜態頁面的更新能夠被刷新出來。

路由的5個物件

Routes，path中不加/

RouterLink

Router物件

在app.component.ts中，通過建構函式建立，然後在事件中呼叫導航

 效果：

    

——————————————————————————————

RouterOutlet

插座，在插座下面顯示元件的內容，根據路由配置，將子元件的內容，放在插座所在位置。

 

 

——————————————————————————————

ActivateRoute

三種傳遞引數的方法

在查詢引數中傳遞資料

傳入引數：

接收引數：

@Input (Input Decorator):代表是一個輸入屬性

 

在查詢路徑中傳遞資料

傳入引數：

 

 

相同的商品詳情元件路由到商品詳情的時候，ProductComponent不會再次呼叫建構函式建立ActivitedRoute，那麼OnInit方法也不會被再次建立。

解決方法:

在Init方法中進行訂閱。

 

在路由配置中傳遞資料

 

重定向路由

當訪問一個路徑的時候，可以重新指向一個新的地址

比如訪問https://www.baidu.com/home

最終訪問的仍然是https://www.baidu.com/

 

/home指向空的路徑

效果

使用空的路徑，就能夠重定向到home頁面中

 

 

子路由

子路由是一個數組

 

傳引數

元件中獲得引數

顯示效果：

 

 

 

輔助路由

在插座中給一個名字

在路由中寫上插座的名稱，這樣可以規定在那個插座上顯示哪個元件

上面這兩個都在aux插座上顯示

 

在總模板html上增加一個帶名字的插座

路由中

文字框

css設定樣式

 

 

 

 

路由守衛

使用路由守衛---鉤子

只有當用戶已經登入並擁有某些許可權才能進入某些路由

CanActivate：(可執行)

 

 

一個由多個表單元件的嚮導，例如註冊流程，使用者只有在當前路由的元件中填寫了滿足要求的資訊才可以導航到下一個路由

CanDeactivate：（可禁用）

 

 

 

當用戶未執行儲存操作而試圖離開當前導航時提醒使用者

Resolve：例如:頁面修改，在元件中發出http請求，中間有時間差，模板會延遲載入，使用resolve，在進入路由前就讀完資料，然後帶著資料進入，這樣資料不會有延遲載入

 

最後畫了一個路由配置的流程圖，個人理解，可能有誤，希望多多指教