子路由學習筆記：

子路由和路由一樣的配置方法，都是宣告好路由的入口，路由的路徑，路由的出口，不一樣的是自路由是巢狀在副路由裡面的並且由children表明這是子路由且可以無限迴圈巢狀。

路由入口：需要注意的是在子路由的入口處不能再用/來跟路徑名，/會告訴angular去找跟元件，就會找到跟元件對應的模組，子路由需要用./

1.設定根路由入口：在模板（html）上設定，路由入口就是點選哪裡開始路由到新元件（點選首頁到首頁去）

<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/product']" [queryParams]=
 
"{id:1}">商品詳情</a>
<a [routerLink]="['/home',2]">主頁</a>

子路由入口：（子路由是./）字路由是路由裡面套的路由可以無限巢狀。

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">商品描述</a>

路由出口（路由出口是指新的元件將在哪裡顯示。入口指定什麼時候載入新元件，出口指載入完的元件顯示在哪裡）：路由的出口和入口均在模板裡面設定

<router-outlet></router-outlet>
 

路由路徑：當路由的出口入口都設定好了的時候就來配置路由的路徑。路徑指定了當訪問哪條路徑的時候載入哪個模板

const routes:Routes=[
  {path:'',redirectTo:'/home',pathMatch:'full'},
{path:'product',component:ProductComponent,children:[
    {path:'',component:ProductdescComponent} ,
{path:'seller/:id',component:SellerComponent}
  ]},
{path:'home/:id',component
 
:HomeComponent},//整個路徑被劃分成兩段變數，一段是路徑，一段時引數
{path:'**',component:Code404Component}//萬用字元，當路徑找不到的時候訪問
];

輔助路由：

分三步：

1.在主路由的插座也就是出口處定義一個輔助路由插座：也就是定義個輔助路由的出口：輔助路由的出口定義和主路由一樣，只是輔助路由比主路由多了一個name屬性：用來指定輔助路由顯示那幾個元件

這裡指輔助路由顯示outlet叫做aux對應的元件

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

2.配置輔助路由路徑：必須加一個outlet屬性，指定該路由顯示在名字叫什麼的輔助路由出口（插座）上；

這裡指當訪問chat時載入XchatComponnet顯示在名字叫aux的這個輔助路由出處。

{path:'chat',component:XhatComponent,outlet:'aux'},

3.配置入口引數：輔助路由的引數將是一個物件，這個物件裡面有一個屬性outlets，這個屬性的值也是一個物件，該物件裡面傳一個name屬性指定要顯示的輔助路由的名字，值是該輔助路由需要顯示的元件路徑；比如下面：名字叫aux的輔助路由將顯示路徑為chat的元件

需要注意的是當不希望輔助路由顯示的時候可以吧name設定為null。

這裡指點選開始聊天的時候載入路徑為chat對應的元件，顯示在名字叫做aux的輔助路由出口上。

<a [routerLink]="[{outlets:{aux:'chat'}}]">開始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]">結束聊天</a>

當希望跳轉輔助路由的同時主路由跳轉到指定的元件的時候：可以在入口檔案加一個屬性：primary,屬性的值是需要跳轉的主元件的路由路徑例如下面點選聊天的同時不管目前在哪個元件下主路由都會跳轉回home路徑下的元件

<a [routerLink]="[{outlets:{primary:home, aux:'chat'}}]">開始聊天</a>