提姆寫程式

0%

Angular 筆記 - Router 路由基礎認識

發表於 更新於 分類於 Disqus：
SPA 一定要有路由

angular

SPA - Single Page Application 單頁應用程式網頁，就是透過 Router 技術達成的，最經典的例子就是 Gmail。

設定 Router

在 Angular 10 的 CLI 創建中一開始已經可以選擇是否建立 router 模組，所以建置好後會得到一個 app-routing.module.ts 檔案。

打開會看到預設建置完成的樣子。

1
2
3
4
5
6
7
8
9
10
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = []; // 主要寫其他路由的地方

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Angular 路由在取得 URL 後五個核心動作

  1. 套用轉址設定。(Applying Redirect)
  2. 從 URL 識別路由狀態。(Recognizing States)
  3. 從路由狀態解析出路由資訊。(Running Guards & Resolving Data)
  4. 依據路由資訊產生元件實體。(Activating Components)
  5. 套用導覽動作，從目前狀態移轉至下一個狀態。(Navigation)

建立路由與存放標籤

透過指令 ng g c home 跟 ng g c second，建立成功後要設定路徑，

1
2
3
4
5
6
7
8
9
<h1>Angular Router</h1>
<hr />

<ul>
  <li><a [routerLink]="['/home']">home</a></li>
  <li><a [routerLink]="[ '/second']">second</a></li>
</ul>

<router-outlet></router-outlet>

設定兩個連結，並且指向指定頁面，最後要加上 <router-outlet> 來存放路由，到此已經把基本路由的方式寫完了，接著要把路由建立起來。

要將路由設定寫在這個陣列中，並用物件呈現。

const routes: Routes = [];

建立路由

在建立 component 的過程中， Angular 已經自動將新增的兩個元件加入到 app.module.ts 的元件中，所以就不需做任何的設定，只要專心設定路由就可以了。

路由設定有兩組基本的屬性與值，一個是 path 路徑，另一個是要連結的元件。

1
2
3
4
5
6
7
8
9
10
const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
];

完整路由程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 官方元件
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

// 自動新增自訂元件
import { HomeComponent } from "./home/home.component";
import { SecondComponent } from "./second/second.component";

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

路由其他進階設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const routes: Routes = [
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full", // 當路徑是空的時候轉址到 home
  },
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "second",
    component: SecondComponent,
  },
  {
    path: "**",
    component: HomeComponent, // 萬用路徑，路由沒有比對到，永遠會執行
  },
];

設定子路由 Child Routing

這是路由比較進階的作法，就是在原本的路由下再建立更多的路由；也就是有些頁面下還會有其他子頁面。

設定指令如下：

  1. 建立 HOME 元件下的 home1 頁面。
1
ng g c home/home1

2.建立 HOME 元件下的 home1 頁面。

1
ng g c home/home2

輸入後就會在 home 資料夾中增加兩個子資料夾，分別為 home1，home2，裡面的元件也都會自動建立好。

接著在 home.component.html 中建立下方路由程式碼，因為 home1 跟 home2 是相依在 home 的下方，建立完路由後一樣要給予 <router-outlet> 這個標籤做接口。

1
2
3
4
5
6
7
8
9
<p>home works!</p>
<hr />

<ul>
  <li><a [routerLink]="['/home/home1']">Home1</a></li>
  <li><a [routerLink]="['/home/home2']">Home2</a></li>
</ul>

<router-outlet></router-outlet>

完成後來看到 home.component.ts，我在 home1 建立了路由後，要在這邊加上子路由的設定，寫法跟路由很相似。

下方可以看到在 HomeComponent 後面直接加上一個 children 的陣列，裡面包著物件，這跟原本的路由設定概念相同，很重要的地方是子路由第一個 path 一定要寫，並給予空值，代表不管怎麼樣一定都會跑這行，不然後面的子路由會讀不到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
   path: 'home',
   component: HomeComponent,
   children: [
     {
       path: '', // 一定要加這行
     },
     {
       path: 'home1',
       component: Home1Component,
     },
     {
       path: 'home2',
       component: Home2Component,
     },
   ],
 },

這樣在點擊 home，就會出現 home1 跟 home2，並且顯示其內容。

完整路由寫法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'home1',
        component: Home1Component,
      },
      {
        path: 'home2',
        component: Home2Component,
      },
    ],
  },
  {
    path: 'second',
    component: SecondComponent,
  },
  {
    path: '**',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

參考資料