1.路由配置

• 創(chuàng)建兩個組件
• 在app-routing.modult.ts中配一個空路由

const routes: Routes = [
    {path: '', component: HomeComponent}
];

在做路由配置時path屬性不要用’/'開頭，因為angular本身會根據(jù)path的值做相應的解析生成url。

• 在app.component.html中自動加入<router-outlet></router-outlet>
• link訪問路由寫法：<a [routerLink]="['/']">主頁</a>
• 通過調(diào)用方法訪問路由的寫法

<input type="button" value="我是詳情" (click)="toStockDetail()">

方法在app.component.ts中聲明：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private router: Router){
        
  }
  toStockDetail(){
    this.router.navigate(['/stock']);
  }
}

• 當用戶訪問的路由不存在時，頁面出錯，可以通過配置通配符解決問題。
  創(chuàng)建一個新的組件，在路由配置中加{path: '**', component: Code404Component}

通配符寫在整個路由配置的最后面。

2.數(shù)據(jù)傳遞

１．在查詢參數(shù)中傳遞數(shù)據(jù)

• 路由路徑？參數(shù)名=參數(shù)值
• /product?id=1&name=2 => ActivatedRoute.queryParams[id]

2.在路由路徑中傳遞數(shù)據(jù)

• 指定路由路徑加參數(shù)名=>在實際路徑中攜帶的參數(shù)=>調(diào)用
• {path:/product/:id}=>/product/1=>ActivatedRoute.params[id]

3.在路由配置中傳遞數(shù)據(jù)

• 通過data參數(shù)定義靜態(tài)數(shù)據(jù)，data本身為數(shù)組
• {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.data[0][isProd]

4.在url中傳遞參數(shù)

• 修改路由配置中的path屬性，使其可以攜帶參數(shù)。
• {path: 'stock/:id', component: ProductComponent, data:[{isPro:true}]}
• 修改路由鏈接，讓鏈接在跳轉(zhuǎn)時攜帶參數(shù)。
• <a [routerLink]= "['/stock',1]" >url獲取參數(shù)</a>

3.參數(shù)快照與參數(shù)訂閱

• 參數(shù)快照：傳參方式與前面記錄相同。當從主頁跳轉(zhuǎn)到詳情頁時，詳情頁組件被創(chuàng)建，調(diào)用ngOnInit()方法，但是，當詳情頁跳轉(zhuǎn)到詳情頁時（兩個傳參不同），組件不會被重新創(chuàng)建，ngOnInit()方法在同一組件路由到自身時不會被調(diào)用。

this.id = this.routerInfo.snapshot.params["id"]

• 參數(shù)訂閱：訂閱方式改變參數(shù)值時，每當路由參數(shù)變換時，匿名的方法都會被調(diào)用一次。

this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])

4.重定向路由

{path: '', redirectTo: '/home',pathMatch:'full'}

pathMatch:'full'表示只有訪問路徑是精準的空字符串時才跳轉(zhuǎn)到/home上。

{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}

pathMatch:'prefix'表示路徑是以“xx”開頭就可跳轉(zhuǎn)到/home上。

5.子路由

在原有路由的基礎上加children屬性。將router-outlet聲明在哪個子路由就會顯示在哪兒。由于聲明的是子路由，在訪問子路由時是不能以“/”開頭的，“/”開頭代表在主路由中找，子路由以“./”開頭。

• 子路由可以一直嵌套
• 路由信息和組件是分離的

{path: 'stock', component: StockComponent,
    children:[
      {path: '', component:BuyerListComponent},
      {path: 'seller/:id', component:SellerListComponent}
    ] 
 }

6.輔助路由

在每個頁面都有的一些側(cè)邊導航，會用到輔助路由。

• 在組件模板上除了外，還需要聲明一個帶name屬性的
• 在路由配置中去配置aux可以顯示哪些組件。

{path: 'consult', component: ConsultComponent,outlet:"aux"}

• 導航時指定在路由到某個地址時，輔助路由上需要顯示哪個組件。

<a [routerLink]="[{outlets: {aux: 'consult'}}]">開始</a><br>

說明：主路由的內(nèi)容也可以控制，主路由沒有設置名字，它有一個默認的關(guān)鍵字——primary，在aux前面加上primary:'home'，然后點擊，主路由跳轉(zhuǎn)到home。