RouterLinkを使用したナビゲーション

アプリケーションの現在の状態では、アプリケーション内に存在する内部リンクをクリックすると、ページ全体がリフレッシュされます。これは小さなアプリケーションではそれほど重要ではないように思えるかもしれませんが、ユーザーがアセットを再ダウンロードして計算をやり直す必要がある、より多くのコンテンツを持つ大きなページでは、パフォーマンスに影響を与える可能性があります。

このアクティビティでは、Angular Routerを最大限活用するために、RouterLinkディレクティブを利用する方法を学習します。

1. RouterLinkディレクティブのインポート

   app.component.tsで、@angular/routerからの既存のインポートステートメントにRouterLinkディレクティブインポートを追加し、コンポーネントデコレーターのimports配列に追加します。

         
   ...
   import { RouterLink, RouterOutlet } from '@angular/router';
   @Component({
     standalone: true,
     imports: [RouterLink, RouterOutlet],
     ...
   })
       

2. テンプレートへのrouterLinkの追加

   RouterLinkディレクティブを使用するには、href属性をrouterLinkに置き換えます。この変更をテンプレートに適用してください。

         
   import { RouterLink, RouterOutlet } from '@angular/router';
   @Component({
     ...
     standalone: true,
     template: `
       ...
       <a routerLink="/">Home</a>
       <a routerLink="/user">User</a>
       ...
     `,
     imports: [RouterLink, RouterOutlet],
   })
       

これで、ナビゲーション内のリンクをクリックしてもちらつきはなく、ページの内容自体（つまり router-outlet）のみが変更されます🎉

Angularでのルーティングについて学ぶことは素晴らしいことです。これはRouter APIの表面的な部分に過ぎません。詳細については、Angular Router ドキュメントをご覧ください。