【Angular】ルーターリンクにパラメータを渡そう！【routerLink】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はルーターリンクにパラメータを渡す方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

ルータリンクにパラメータを渡せる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
実際に作ってみよう！！
まとめ

作りたいもの

トップ画面でユーザ選択し、ユーザ情報表示画面ユーザIDを渡す
ユーザ情報詳細画面でユーザIDを受け取り、データを取得する

という流れのアプリケーションを作ります。

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

実際に作ってみよう！！

ルーティング設定をしよう！

ng generate module my-routing --flat --module=app

パラメータを渡すには

■パラメータを渡す構文

const routes: Routes = [
  { path: 'パス/:パラメータ名', component: コンポーネント名 },
];

ルーターリンクにパラメータを渡すには、
ルーティング設定にパラメータを記述しておく必要があります。

パラメータ名は、受け取るコンポーネントと統一する必要があるよ！

my-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

// ルーティング設定
const routes: Routes = [
  { path: 'top', component: UserListComponent },
  // パラメータを{ user-id:値 }という形式で渡す
  // 【重要】パラメータ名はuser-detail.component.tsと合わせる
  { path: 'user-detail/:user-id', component: UserDetailComponent },
  // 不正なURLの場合、topへリダイレクト
  { path: '**', redirectTo: '/top', pathMatch: 'full' },
];

@NgModule({
  // ルーティングを有効にする
  // 以下の2つの設定がないと、が受け取れない
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class MyRoutingModule {}

ルーティングの基本について復習したい方はこちら！

【Angular】ルーティングを設定しよう！【RouterModule】

app.component.html

<h1>ルーターリンクにパラメータを渡す</h1>

<router-outlet></router-outlet>

これでルーティング設定を受け取るれるよ！

ユーザ一覧画面をつくろう

ng generate component user-list

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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css'],
})
export class UserListComponent implements OnInit {
  // HttpClientをインスタンス化(DI)
  constructor(private http: HttpClient) {}

  userList: any;

  GET_USERS_API = 'https://jsonplaceholder.typicode.com/users';

  ngOnInit(): void {
    // 画面表示時にAPIを叩く
    this.getUserList();
  }

  /**
   * ユーザリスト取得関数
   */
  getUserList(): void {
    // HTTP通信
    this.http.get(this.GET_USERS_API).subscribe(
      // 通信成功　200~299の処理
      (response) => {
        console.log(response);
        // ユーザリストにレスポンスを代入
        this.userList = response;
      },
      // 通信失敗時の処理
      (error) => {
        console.error(error);
      }
    );
  }
}

HTTP通信について復習したい方はこちら！

【Angular】HTTP通信をしよう！【HttpClient】

ルーターリンクにパラメータを設定

ルーターリンクにパラメータを渡すには、このような記述になります。

<a routerLink="/パス/渡したい値">

user-link.html

<h2>ユーザ一覧</h2>

<div class="" *ngFor="let user of userList">
  <!-- ユーザIDをuser-detail.component.tsに渡してページ切り替え-->
  <a routerLink="/user-detail/{{ user.id }}">
    {{ user.id }}：{{ user.name }}
  </a>
</div>

パラメータを受け取ろう

パラメータを受け取るにはActivatedRouteを使用します。

■構文

constructor(
    // URLパラメータを取得するサービス
    private route: ActivatedRoute,
) {}

this.route.snapshot.paramMap.get(パラメータ名);

ここのパラメータ名はmy-routing.moudle.tsで設定したものだよ！

コンポーネント作成

ge generate component user-detail

user.detail.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css'],
})
export class UserDetailComponent implements OnInit {
  user: any;
  GET_USERS_API = 'https://jsonplaceholder.typicode.com/users';

  constructor(
    private http: HttpClient,
    // URLパラメータを取得するサービス
    private route: ActivatedRoute,
    // ブラウザの戻る・進むをAngular経由で行う
    private location: Location
  ) {}

  ngOnInit(): void {
    // 取得パラメータを確認
    console.log(this.route.snapshot.paramMap);
    // ユーザ情報取得
    this.getUser(this.userId);
  }

  // user-idパラメータを取得する
  // 【重要】パラメータ名はmy-routing.module.tsと合わせる
  userId = this.route.snapshot.paramMap.get('user-id');

  /**
   * ユーザ取得関数
   * パラメータにユーザIDを指定してユーザ指定
   * @param userId ユーザID
   */
  getUser(userId: string): void {
    // HTTP通信
    this.http
      .get(
        this.GET_USERS_API,
        // パラメータを指定。idが777の場合、以下と同様
        // GET_USERS_API = 'https://jsonplaceholder.typicode.com/users?userId=1';
        { params: { id: userId } }
      )
      .subscribe(
        // 通信成功　200~299の処理
        (response) => {
          console.log(response);
          // selectedUserにレスポンスを代入
          // ※配列形式のため、0番目を指定
          this.user = response[0];
        },
        // 通信失敗時の処理
        (error) => {
          console.error(error);
        }
      );
  }

  goBack() {
    // 前のページに戻る
    this.location.back();
  }
}

ちなみに、パラメータはこのような形式で取得されます。

user.detail.component.html

<!-- ユーザ情報取得後似表示 -->
<div *ngIf="user">
  <h2>ユーザ情報</h2>
  Name：{{ user.name }}
  <br />
  ID：{{ user.id }}
  <br />
  E-mail：{{ user.email }}
  <br />
  TEL：{{ user.phone }}
</div>

<button (click)="goBack()">戻る</button>

このようにユーザ7を選択すると

user-detail/7

というルーティングが適用され、受け取った7をユーザIDとして検索し
データを取得することができました。

まとめ

パラメータ名付きのルーティング設定をしておくことで、ルータリンクをにパラメータを渡すことが可能
パラメータを受け取るにはActivetedRouteを使う

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram