【Angular】ボタンを押したら別のページに遷移する方法

2023 9/12

2022年8月10日 2023年9月12日

Angularでボタンを押したら別のページに遷移する方法が知りたいなぁ….

結論、AngularのRouterを使えばできます。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

実装内容

実装する内容です。

トップ画面へ遷移するボタンを押下→トップ画面に遷移する(URLは/)

ユーザー登録画面へ遷移するボタンを押下→ユーザー登録画面に遷移する(URLは/userRegister)

企業一覧画面へ遷移するボタンを押下→企業一覧画面に遷移する(URLは/company)

ボタン押下したら別のページに遷移する実装

HTML

<button mat-raised-button color="primary" (click)="onClickToTop()">トップ画面へ遷移する</button>
<button mat-raised-button color="primary" (click)="onClickToUserRegister()">ユーザー登録画面へ遷移する</button>
<button mat-raised-button color="primary" (click)="onClickToCompany()">企業一覧画面へ遷移する</button>

mat-raised-buttonを使うには、事前にangular materialのmat-buttonをインストールしておく必要があります。

それぞれボタンをクリックした時に、クリックイベントを設定しましょう。あとはtsファイルがわでクリックイベントを定義すれば良いです。

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

@Component({
  selector: 'app-t3',
  templateUrl: './t3.component.html',
  styleUrls: ['./t3.component.css']
})
export class T3Component implements OnInit {

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  /**
   * トップ画面に遷移する
   */
  public onClickToTop() {
    this.router.navigate(["/"]);
  }

  /**
   * ユーザー登録画面に遷移する
   */
  public onClickToUserRegister() {
    this.router.navigate(["/userRegister"]);
  }

  /**
   * 企業一覧画面に遷移する
   */
  public onClickToCompany() {
    this.router.navigate(["/company"]);
  }
}

Routerをimportします。

あとは、this.router.navigate([“URL”])とすれば良いです。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい