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

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

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

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

   app.component.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 ドキュメントをご覧ください。