為應用程式加入路由

本教學課程示範如何為你的應用程式加入路由。

IMPORTANT: 我們建議使用你的本機環境來學習路由。

你將學到什麼

在這一課結束時，你的應用程式將支援路由。

路由概念預覽

本教學介紹 Angular 中的路由。路由是從應用程式中的一個元件導覽到另一個元件的能力。在單頁應用程式（SPA）中，頁面只有部分會更新，以呈現使用者所要求的檢視畫面。

Angular Router讓使用者能宣告路由，並指定當應用程式請求某條路由時，畫面上應該顯示哪個元件。

在這一課中，你會在應用程式中啟用路由，以便導覽到詳細資訊頁面。

  1. 建立預設的詳細資訊元件

    1. 在終端機中，輸入下列指令，建立 Details：

      ng generate component details

      這個元件將代表詳細資訊頁面，提供特定房屋地點的更多資訊。

  2. 為應用程式加入路由

    1. 在 src/app 目錄中，建立一個名為 routes.ts 的檔案。我們會在這個檔案中定義應用程式的路由。

    2. 在 main.ts 中，進行下列更新，在應用程式中啟用路由：

      1. 匯入路由檔案與 provideRouter 函式：

        在 src/main.ts 中匯入路由相關內容

        import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));

      2. 更新對 bootstrapApplication 的呼叫，加入路由設定：

        在 src/main.ts 中加入路由設定

        import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {provideRouter} from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig)],
}).catch((err) => console.error(err));

    3. 在 src/app/app.ts 中，更新元件以使用路由：

      1. 為路由指令 RouterLink 與 RouterOutlet 加入檔案層級的匯入：

        在 src/app/app.ts 中匯入路由指令

        import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

      2. 在 @Component 中繼資料的 imports 中，將 Home 換成 RouterLink 與 RouterOutlet：

        將路由指令加入 src/app/app.ts 的元件 imports

        import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

      3. 在 template 屬性中，用 <router-outlet> 指令取代 <app-home /> 標籤，並加入一個連回首頁的連結。你的程式碼應該與這段程式碼一致：

        在 src/app/app.ts 中加入 router-outlet

        import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

  3. 為新元件加入路由

    在上一個步驟中，你移除了範本中對 <app-home> 元件的參照。在這個步驟中，你會為該元件加入一條新路由。

    1. 在 routes.ts 中，進行下列更新，建立一條路由。

      1. 為 Home、Details 與路由定義中會用到的 Routes 型別加入檔案層級的匯入。

        匯入元件與 Routes

        import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;

      2. 定義一個型別為 Routes、名為 routeConfig 的變數，並為應用程式定義兩條路由：

        為應用程式加入路由

        import {Routes} from '@angular/router';
import {Home} from './home/home';
import {Details} from './details/details';

const routeConfig: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home page',
  },
  {
    path: 'details/:id',
    component: Details,
    title: 'Home details',
  },
];

export default routeConfig;

        routeConfig 陣列中的項目代表應用程式中的路由。第一個項目會在 url 符合 '' 時導覽到 Home。第二個項目使用了一些特殊格式，之後的課程會再回頭說明。

    2. 儲存所有變更，確認應用程式在瀏覽器中可以運作。應用程式應該仍然會顯示房屋地點清單。

SUMMARY: 在這一課中，你在應用程式中啟用了路由，也定義了新路由。現在你的應用程式可以支援在不同檢視畫面之間導覽。在下一課中，你將學會如何導覽到特定房屋地點的「詳細資訊」頁面。

你的應用程式有很大的進展，做得很好。

如需本課所涵蓋主題的更多資訊，請造訪：