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

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

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

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

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

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

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

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

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

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

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