Angularでnavigateを使ってルートを切り替える

はじめに

Angularプロジェクト内で使うルート制御をするには、Routerのnavigateメソッドを使って行えます。

今回はこれを使って、コンポーネントでルート(URL)を切り替える実装を解説します。

実装

全体のルーティング設定

全体のルーティング設定は以下になります。

export const routes: Routes = [
  { path: 'second', component: SecondComponent },
  { path: 'first', component: FirstComponent },
];

コンポーネント

export class FirstComponent implements OnInit {
  constructor(private router: Router){}

  ngOnInit(): void {
    this.router.navigate(['/second'])
  }  
}

Routerを依存性注入し、そのnavigateメソッドに、ルーティング設定されているルート(URL, path)を設定することで、ルートを切り替えることができます。

Javascriptでルートを切り替える方法との違い

AngularはSPAであり、navigateを使うことで、ブラウザのF5のような画面更新が入らずに状態を保持したまま、URLを切り替えて画面描画を変更することができます。