カスタムルートマッチの作成

Angular Routerは、アプリケーションのナビゲーションを支援するために使用できる強力なマッチング戦略をサポートしています。このマッチング戦略は、パラメーター付きの静的ルート、可変ルート、ワイルドカードルートなどをサポートしています。また、URLがより複雑な状況で独自のカスタムパターンマッチを作成できます。

このチュートリアルでは、AngularのUrlMatcherを使用してカスタムルートマッチャーを作成します。このマッチャーは、URL内のTwitterハンドルを検索します。

目標

AngularのUrlMatcherを実装してカスタムルートマッチャーを作成します。

サンプルアプリケーションの作成

Angular CLIを使用して、新しいアプリケーションangular-custom-route-matchを作成します。デフォルトのAngularアプリケーションフレームワークに加えて、profileコンポーネントも作成します。

新しいAngularプロジェクト、angular-custom-route-matchを作成します。
```
ng new angular-custom-route-match
```
Angular routingを追加しますか？と表示されたら、Yを選択します。

どのスタイルシート形式を使用しますか？と表示されたら、CSSを選択します。

しばらくすると、新しいプロジェクトangular-custom-route-matchの準備が整います。
ターミナルからangular-custom-route-matchディレクトリに移動します。
コンポーネント、profileを作成します。
```
ng generate component profile
```
コードエディタでprofile.component.htmlファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。
src/app/profile/profile.component.html
```
      <p>    Hello {{ username }}!</p>
    
```

コードエディタでapp.component.htmlファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。

src/app/app.component.html

      <h2>Routing with Custom Matching</h2>Navigate to <a routerLink="/@Angular">my profile</a><router-outlet></router-outlet>

アプリケーションのルートを構成する

アプリケーションフレームワークが整ったら、次にapp.config.tsファイルにルーティング機能を追加する必要があります。このプロセスの一環として、URL内のTwitterハンドルを検索するカスタムURLマッチャーを作成します。このハンドルは、先行する@シンボルによって識別されます。

コードエディタでapp.config.tsファイルを開きます。
AngularのprovideRouterとwithComponentInputBinding、およびアプリケーションルートのimportステートメントを追加します。
```
import {provideRouter, withComponentInputBinding} from '@angular/router';

import {routes} from './app.routes';
```
プロバイダー配列にprovideRouter(routes, withComponentInputBinding())ステートメントを追加します。

アプリケーションルートに次のコードを追加して、カスタムルートマッチャーを定義します。

src/app/app.routes.ts

      import {Routes, UrlSegment} from '@angular/router';import {ProfileComponent} from './profile/profile.component';export const routes: Routes = [  {    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: ProfileComponent,  },];

このカスタムマッチャーは、次のタスクを実行する関数です。

マッチャーは、配列にセグメントが1つしかないことを確認します
マッチャーは正規表現を使用して、ユーザー名の形式が一致することを確認します
一致があれば、関数は完全なURLを返し、usernameルートパラメーターをパスのサブストリングとして定義します
一致しなければ、関数はnullを返し、ルーターはURLと一致する他のルートを探し続けます

HELPFUL: カスタムURLマッチャーは、他のルート定義と同じように動作します。他のルートと同じように、子ルートまたは遅延読み込みルートを定義します。

ルートパラメーターの読み取り

カスタムマッチャーが設定されたので、profileコンポーネントでルートパラメーターをバインドできます。

コードエディタでprofile.component.tsファイルを開き、usernameパラメーターと一致するInputを作成します。以前、provideRouterでwithComponentInputBinding機能を追加しました。これにより、Routerはルートコンポーネントに直接情報をバインドできます。