建立自訂路由比對

Angular Router 支援強大的比對策略，協助使用者在你的應用程式中導覽。這套比對策略支援靜態路由、帶參數的可變路由、萬用字元路由等。你也可以為 URL 較複雜的情境，建立自己的自訂模式比對。

在本教學中，你將使用 Angular 的 UrlMatcher 建立自訂路由比對器。這個比對器會在 URL 中尋找 X（前身為 Twitter）帳號名稱。

目標

實作 Angular 的 UrlMatcher，建立自訂路由比對器。

建立範例應用程式

使用 Angular CLI 建立一個新應用程式 angular-custom-route-match。除了預設的 Angular 應用程式框架外，你還會建立一個 profile 元件。

建立一個新的 Angular 專案 angular-custom-route-match。
```
ng new angular-custom-route-match
```
當畫面提示 Would you like to add Angular routing? 時，選取 Y。

當畫面提示 Which stylesheet format would you like to use? 時，選取 CSS。

稍待片刻，新專案 angular-custom-route-match 就準備好了。
在終端機中，切換到 angular-custom-route-match 目錄。
建立一個元件 profile。
```
ng generate component profile
```
在程式碼編輯器中，找到 profile.html 檔案，把預留內容換成下列 HTML。
profile.html
```
<p>Hello {{ username() }}!</p>
```

在程式碼編輯器中，找到 app.html 檔案，把預留內容換成下列 HTML。

app.html

<h2>Routing with Custom Matching</h2>

Navigate to <a routerLink="/@Angular">my profile</a>

<router-outlet />

為應用程式設定路由

應用程式框架就緒後，接下來你需要把路由功能加入 app.config.ts 檔案。在這個過程中，你將建立一個自訂 URL 比對器，在 URL 中尋找 X 帳號名稱。帳號名稱前面會帶有 @ 符號。

在程式碼編輯器中，開啟 app.config.ts 檔案。

加入 Angular 的 provideRouter 與 withComponentInputBinding 以及應用程式路由的 import 陳述式。

import {provideRouter, withComponentInputBinding} from '@angular/router';

import {routes} from './app.routes';

在 providers 陣列中，加入 provideRouter(routes, withComponentInputBinding()) 陳述式。

把下列程式碼加入應用程式路由，定義自訂路由比對器。

app.routes.ts

{
  matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
      return {consumed: url, posParams: {username: new UrlSegment(url[0].path.slice(1), {})}};
    }

    return null;
  },
  component: Profile,
},