【Angular】ページ遷移とパラメータの受け渡し

Angularでページ遷移を実現する方法と、ページ遷移の際にパラメータを受け渡す際の実装をご紹介していきます。

開発環境

OS：Windows10 Pro
Node.js：v12.16.3
npm：6.14.4
Angular CLI：9.1.4

新規ページの作成

まずは遷移先となるページを作成します。

今回は新たにappフォルダ配下にpagesフォルダを作成しました。

コマンドラインでpagesフォルダまで移動し、下記コマンドを実行します。

ng g c SamplePage

1	ng g c SamplePage

上記コマンドでカレントディレクトリ（この場合はpagesフォルダ）に新規コンポーネント「SamplePage」が作成されます。

ルーティングの設定

ページ遷移処理を実装するにあたり、新規作成したページを登録しておく必要があります。

設定先は「app-routing.module.ts」というファイルです。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

上記は作成時点のファイルになりますが、こちらを以下のように編集します。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SamplePageComponent } from './pages/sample-page/sample-page.component';


const routes: Routes = [
  {
    path: 'sample-page',
    component: SamplePageComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

import { Routes, RouterModule } from '@angular/router';

import { SamplePageComponent } from './pages/sample-page/sample-page.component';

const routes: Routes = [

{

path: 'sample-page',

component: SamplePageComponent

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

プロパティroutesに新規作成したSamplePageコンポーネントのパスとクラスを設定しました。

この設定を私は忘れがちでいつもビビるので、皆さんお気を付けください…。

ページ遷移の実装

今回はAppからSamplePageへの遷移を行いますので、遷移元であるAppComponentを編集していきます。

app.component.html

遷移元ページは下記コードのみ。

<router-outlet></router-outlet>

1	<router-outlet></router-outlet>

このタグが遷移先ページを表示する箇所を示します。

なので、他に要素を配置しておけばそれらを表示したまま遷移することが可能です。

ボタンを配置して、その下に遷移先を表示させるサンプルが沢山紹介されていますね。

app.component.ts

続いて処理の実装です。

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

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

  title = 'sample';

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    this.router.navigate(['sample-page']);
  }
}

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

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

title = 'sample';

constructor(

private router: Router

) { }

ngOnInit() {

this.router.navigate(['sample-page']);

}

今回は簡単な例というコトで、遷移のアクションを起こすようなフォームは設けず、初期化のタイミングで遷移を行います。

ngOnInitの中で実装している部分が遷移を行うコードになります。

Router.navigateメソッドの引数に、先ほどルーティング設定したSamplePageのパスを渡しています。

上記設定により、AppからSamplePageへの遷移を行うことが出来ます。

実際に動かしてみると、一瞬なので分かりにくいと思いますが、「sample-page works!」と左上に表示されます。

パラメータの受け渡し

先ほどのページ遷移にクエリパラメータ（遷移パラメータ）を追加してみます。

実際の開発現場では、一覧画面から詳細画面への遷移の際にIDなどを渡す為に使ったりします。

app.component.ts

遷移元ページのコードは変わらず、内部処理を編集します。

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

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

  title = 'sample';

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    this.router.navigate(
      ['sample-page'],
      {
        queryParams:
        {
          id: 'hoge'
        }
      }
    );
  }
}

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

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

title = 'sample';

constructor(

private router: Router

) { }

ngOnInit() {

this.router.navigate(

['sample-page'],

{

queryParams:

{

id: 'hoge'

}

);

}

上記のコードではクエリパラメータとして、キーが「id」である値「hoge」を付与しました。

sample-page.component.ts

続いて遷移先でのパラメータ取得を実装していきます。

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

@Component({
  selector: 'app-sample-page',
  templateUrl: './sample-page.component.html',
  styleUrls: ['./sample-page.component.scss']
})
export class SamplePageComponent implements OnInit {

  constructor(
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.activatedRoute.queryParams.pipe().subscribe(
      params => {
        console.log(params.id);
      }
    );
  }

}

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

import { ActivatedRoute } from '@angular/router';

@Component({

selector: 'app-sample-page',

templateUrl: './sample-page.component.html',

styleUrls: ['./sample-page.component.scss']

})

export class SamplePageComponent implements OnInit {

constructor(

private activatedRoute: ActivatedRoute

) { }

ngOnInit(): void {

this.activatedRoute.queryParams.pipe().subscribe(

params => {

console.log(params.id);

}

);

}

ngOnInitの中でクエリパラメータを取得し、コンソールに出力している例になります。

遷移の際に使用するRouterではなく、ActivatedRouteをインジェクションしていることにご注意ください。

これ、まとめてくれると本当に助かるんですけどね…。

まとめ

コードベースの簡単な説明ではありましたが、今回はAngularのページ遷移とパラメータの受け渡しについてご紹介しました。

ページ遷移とパラメータの受け渡し

ページ遷移を実装するには
- ルーティング設定を行う。
- Router.navigateメソッドの引数に、ルーティング設定と同じパスを指定する。
ページ遷移でパラメータを受け渡すには
- 遷移元ページでRouter.navigateメソッドの引数にクエリパラメータを指定する。
- 遷移先ページではActivatedRouteを利用してクエリパラメータを取得する。

正直、anyってなかなか慣れません…。

以上です。