-
ルーターリンクの基本的な使用方法: Angularのルーターリンクは、
routerLink
ディレクティブを使用して実装されます。以下は、基本的な構文です。<a routerLink="/path/to/page">リンクテキスト</a>
このように
routerLink
ディレクティブを使用すると、リンクをクリックしたときに指定したパスにナビゲートすることができます。 -
ルートパラメーターの使用: ルーターリンクでは、パラメーターを含むリンクを作成することもできます。以下は、パラメーターを含むルーターリンクの例です。
<a [routerLink]="['/path/to/page', parameterValue]">リンクテキスト</a>
parameterValue
は、リンクに渡すパラメーターの値です。 -
アクティブなルーターリンクのスタイリング: ルーターリンクが現在のアクティブなページを表示するようにするために、スタイリングを適用することもできます。以下の例では、アクティブなリンクに
active
クラスを追加しています。<a routerLink="/path/to/page" routerLinkActive="active">リンクテキスト</a>
routerLinkActive
ディレクティブを使用することで、アクティブなリンクにスタイルを適用できます。
上記のコード例を参考にしながら、Angular 14でのルーターリンクの使用方法を実際のプロジェクトに適用してみてください。これにより、異なるページ間のナビゲーションが容易になります。