25. プログラムでの画面遷移 — Router.navigate

リンクのクリック以外、たとえば「ログインに成功したらトップへ移動する」のように、処理の結果に応じてコード側から画面を切り替えたいことがあります。そのときは inject(Router) で受け取った Router の navigate() を呼びます。this.router.navigate(['/users', id]) と書くと、配列の要素がつながって /users/7 のようなURLへ遷移します。

実務では、フォーム送信の完了後、保存後の一覧への戻り、認証チェックでのログイン画面への誘導など、「ユーザーの操作の後始末として移動させたい」場面で使います。リンクとして見せたいなら routerLink、何かの処理のあとに移動させたいなら navigate、と使い分けると考えやすくなります。

クエリ文字列(?key=value)を付けたいときは navigate の第2引数に { queryParams: { sort: 'new' } } を渡します。受け取る側は ActivatedRoute の queryParamMap から読み取れます。パスの一部(:id)とクエリ(?sort=)は役割が違うので、混同しないよう意識しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  template: '<button (click)="onLogin()">ログイン</button>',
})
export class LoginComponent {
  private router = inject(Router);

  onLogin() {
    // ログイン処理が成功したと仮定して、トップへ遷移する
    // 配列の要素がつながって /users/7 のようなURLになる
    this.router.navigate(['/users', 7], {
      queryParams: { welcome: 'true' }, // /users/7?welcome=true
    });
  }
}

公式ドキュメントで詳しく ↗