Angular 14でのルーターリンクの使用方法


  1. ルーターリンクの基本的な使用方法: Angularのルーターリンクは、routerLinkディレクティブを使用して実装されます。以下は、基本的な構文です。

    <a routerLink="/path/to/page">リンクテキスト</a>

    このようにrouterLinkディレクティブを使用すると、リンクをクリックしたときに指定したパスにナビゲートすることができます。

  2. ルートパラメーターの使用: ルーターリンクでは、パラメーターを含むリンクを作成することもできます。以下は、パラメーターを含むルーターリンクの例です。

    <a [routerLink]="['/path/to/page', parameterValue]">リンクテキスト</a>

    parameterValueは、リンクに渡すパラメーターの値です。

  3. アクティブなルーターリンクのスタイリング: ルーターリンクが現在のアクティブなページを表示するようにするために、スタイリングを適用することもできます。以下の例では、アクティブなリンクにactiveクラスを追加しています。

    <a routerLink="/path/to/page" routerLinkActive="active">リンクテキスト</a>

    routerLinkActiveディレクティブを使用することで、アクティブなリンクにスタイルを適用できます。

上記のコード例を参考にしながら、Angular 14でのルーターリンクの使用方法を実際のプロジェクトに適用してみてください。これにより、異なるページ間のナビゲーションが容易になります。