Router.navigate() メソッドを使って別のページに移動する

2024-04-02

Angular 2でボタンを使って別のページに移動する

RouterLink ディレクティブは、ボタンやその他の要素をクリックしたときに別のページに移動するための最も簡単な方法です。

手順

app.component.ts ファイルに、移動したいページのコンポーネントをインポートします。

import { Component } from '@angular/core';
import { AboutComponent } from './about/about.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() { }

  // ...
}

app.component.html ファイルで、RouterLink ディレクティブを使って、ボタンに移動先のページのパスを指定します。

<h1>My App</h1>
<a routerLink="/about">About</a>

import { Component } from '@angular/core';

@Component({
  selector: 'about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent {
  constructor() { }
}

上記のコードは、AboutComponent という名前のシンプルなコンポーネントです。

実行

上記の手順でコードを作成したら、Angular CLIを使ってアプリを実行できます。

ng serve

ブラウザで http://localhost:4200 を開くと、My App というテキストが表示されます。About というボタンをクリックすると、AboutComponent というコンポーネントが表示されます。

Router.navigate() メソッドは、プログラムによって別のページに移動するための方法です。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) { }

  // ...
}

app.component.ts ファイルの constructor() メソッドで、Router サービスの navigate() メソッドを使って、移動先のページのパスを指定します。

constructor(private router: Router) {
  this.router.navigate(['/about']);
}

ng serve

Angular 2でボタンを使って別のページに移動するには、RouterLink ディレクティブまたは Router.navigate() メソッドを使うことができます。どちらの方法もそれぞれ利点と欠点があるので、状況に合わせて使い分けることが重要です。

RouterLink ディレクティブを使う

<h1>My App</h1>
<a routerLink="/about">About</a>
<a routerLink="/contact">Contact</a>

Router.navigate() メソッドを使う

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) { }

  navigateToAbout() {
    this.router.navigate(['/about']);
  }

  navigateToContact() {
    this.router.navigate(['/contact']);
  }
}

上記コードは、AboutComponent と ContactComponent という2つのコンポーネントへのリンクを作成します。

実行

ng serve

Angular 2で別のページに移動するその他の方法

location.href プロパティを使って、ブラウザの URL を直接変更することで、別のページに移動できます。

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private location: Location) { }

  // ...
}

constructor(private location: Location) {
  this.location.href = '/about';
}

ng serve

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() { }

  // ...
}

constructor() {
  window.location.href = '/about';
}

ng serve

ngSubmit イベントを使って、フォーム送信時に別のページに移動できます。

app.component.html ファイルで、フォーム要素に ngSubmit イベントを指定します。

<form (ngSubmit)="onSubmit()">
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) { }

  onSubmit() {
    this.router.navigate(['/about']);
  }
}

ng serve

Angular 2で別のページに移動するには、RouterLink ディレクティブ、Router.navigate() メソッド、location.href プロパティ、window.location.href プロパティ、ngSubmit イベントなど、いくつかの方法があります。これらの方法にはそれぞれ利点と欠点があるので、状況に合わせて使い分けることが重要です。

angular