angular的路由配置

1，引入路由

import  from '@angular/router';

2，路由路徑

1，每個 route 都會把乙個 url 的 path 對映到乙個元件。注意，path 不能以斜槓（/）開頭。路由器會為解析和構建最終的 url，這樣當你在應用的多個檢視之間導航時，可以任意使用相對路徑和絕對路徑。

2，路由中的 :id 是乙個路由引數的令牌(token)。比如 /hero/42 這個 url 中，「42」就是 id 引數的值。此 url 對應的 herodetailcomponent 元件將據此查詢和展現 id 為 42 的英雄。

3，路由中的 data 屬性用來存放於每個具體路由有關的任意資訊。該資料可以被任何乙個啟用路由訪問，並能用來儲存諸如頁標題、麵包屑以及其它靜態唯讀資料。

},

4，路由中的空路徑（』』）表示應用的預設路徑，當 url 為空時就會訪問那裡，因此它通常會作為起點。這個預設路由會重定向到 url /heroes，並顯示 heroeslistcomponent。

5，路由中的 ** 路徑是乙個萬用字元。當所請求的 url 不匹配前面定義的路由表中的任何路徑時，路由器就會選擇此路由。這個特性可用於顯示「404 - not found」頁，或自動重定向到其它路由。

3，路由出口

routeroutlet 是乙個來自路由模組中的指令，它的用法類似於元件。它扮演乙個佔位符的角色，用於在模板中標出乙個位置，路由器將會把要顯示在這個出口處的元件顯示在這裡。

4，路由連線，啟用

crisis center heroes

a 標籤上的 routerlink 指令讓路由器得以控制這個 a 元素。這裡的導航路徑是固定的，因此可以把乙個字串賦給 routerlink（「一次性」繫結）。

如果需要更加動態的導航路徑，那就把它繫結到乙個返回鏈結引數陣列的模板表示式。路由器會把這個陣列解析成完整的 url。

路由鏈結的啟用狀態

routerlinkactive 指令會基於當前的 routerstate 為活動的 routerlink 切換所繫結的 css 類。

在每個 a 標籤上，你會看到乙個到 routerlinkactive 的屬性繫結，形如 routerlinkactive="…"。

等號右邊的模板表示式包含一些用空格分隔的 css 類名，當這個鏈結啟用時，路由器將會把它們加上去（並在處於非活動狀態時移除）。你還可以把 routerlinkactive 設定為乙個類組成的字串，如 [routerlinkactive]="『active fluffy』"，或把它繫結到乙個返回類似字串的元件屬性。

路由鏈結的啟用狀態會向下級聯到路由樹中的每個層級，所以，父子路由鏈結可能會同時啟用。要覆蓋這種行為，可以把 [routerlinkactiveoptions] 繫結為表示式，這樣 routerlink 只有當 url 與當前 url 精確匹配時才會啟用。

路由器狀態

在導航時的每個生命週期成功完成時，路由器會構建出乙個 activatedroute 組成的樹，它表示路由器的當前狀態。你可以在應用中的任何地方用 router 服務及其 routerstate 屬性來訪問當前的 routerstate 值。

routerstate 中的每個 activatedroute 都提供了從任意啟用路由開始向上或向下遍歷路由樹的一種方式，以獲得關於父、子、兄弟路由的資訊。

angular的路由配置

Angular路由配置

Angular路由子路由

簡單的angular路由

angular的路由配置

Angular路由配置

Angular路由 子路由

簡單的angular路由

相關推薦

Angular路由子路由