設定路由參數

說明

  1. 導覽路由時，可以帶參數，讓目標前往的路由取得參數使用
  2. 帶入參數的方式有三種：
    1. 在路由設定const routes: Routes = []中設定
    2. 使用matrix uel notation表示法
    3. 使用Query String表示法

在路由設定中設定參數

  1. 只要有在path中設定參數，網址列上就必須出現該參數
  2. 如果網址路徑沒有傳入路由參數，路由會比對失敗
  3. 使用/:參數名稱
程式碼寫法
const routes: Routes = [
  {path: 'pathName/:params', component: certainComponent }
]
程式碼範例：

1.在app-routing.module.ts中變更路由設定如下

const routes: Routes = [
  {
    path: '',
    redirectTo: "/pageA",
    pathMatch: "full"
  },
  {
    path: 'pageA',
    component: PageAComponent
  },
  {
    path: 'pageB/:id',
    component: PageBComponent
  },
  {
    path: 'child',
    loadChildren: './child/child.module#ChildModule'
  },
  {
    path: 'error',
    component: ErrorComponent
  },
  errorRoute
];

2.點擊連結來去page-b，此時會因為連結沒有帶入參數，路由比對失敗 3.變更app.component.html中來去page-b的超連結如下

<a routerLink="/pageB/3" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">

4.點擊連結來去page-b測試，並注意網址列路由

matrix uel notation

url格式：類似Query String，但把"?"與"&"都改成";"
http://localhost:4200/path;params1=xx;params2=xx
template寫法
<a [routerLink]="['path', {params1: 'xx'}]">超連結文字</a>
程式碼寫法：傳入一個物件到超連結[routerLink]或程式this.router.navigate()方法內陣列參數的最後一個元素
this.router.navigate(['path', {params1: 'xx'}]);
程式碼範例：

1.在app.component.html'''內的

    ```標籤內最下面增加一個button

<li><button (click)="navigateMatrix()">路由參數(matrix)</button></li>

2.在app.component.ts內加入navigateMatrix()方法

navigateMatrix(){
    this.router.navigate(['child', 'c1', { id: 1, name: "c1" }]);
}

3.點擊連結來去page-c1與按鈕路由參數(Matrix)測試路由導覽，並注意網址列路由

Query String

url格式
http://localhost:4200/path?params1=xx&params2=xx
template寫法
<a [routerLink]="['path', {params1: 'xx'}]">超連結文字</a>
程式碼寫法：傳入一個物件到超連結[routerLink]或程式this.router.navigate()方法內第二個參數的queryParams屬性
this.router.navigate(['path', { params1: 'xx' }]);
程式碼範例：

1.在app.component.html'''內的

    ```標籤內最下面增加一個button

<li><button (click)="navigateQueryString()">路由參數(QueryString)</button></li>

2.在app.component.ts內加入navigateQueryString()方法

navigateQueryString(){
    this.router.navigate(['child', 'c2'], { queryParams: { id: 1, name: "c2" } });
}

3.點擊連結來去page-c2與按鈕路由參數(QueryString)測試路由導覽，並注意網址列路由

results matching ""

    No results matching ""