Angularでのルーティングリンク

前のレッスンでは、URLを手動でアドレスバーに入力していました。 ここでは、クリックすることでさまざまなコンポーネントを表示するリンクを作成してみましょう。

そのために、特別な方法でリンクを作成します。 実際には、本物のリンク遷移は必要ありません。 Angularに別のコンポーネントを表示させ、ブラウザのアドレスバーのURLを変更し、かつページを更新しないようにしたいだけです。

したがって、ネイティブの href 属性の代わりに、Angularの属性である RouterLink を使用します。

これを使用するには、まずインポートする必要があります：

app/app.component.tsimport { RouterLink } from '@angular/router';

デコレーターに記述します：

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink],
  ......
})

これで、リンクを作成できます：

app/app.component.html<nav>
  <a routerLink="/aaaa/">
    Aaaa
  </a>
  <a routerLink="/bbbb/">
    Bbbb
  </a>
</nav>