【Angular】URLパラメータを取得しよう【ActivatedRoute】

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

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はURLパラメータを取得する方法について学んでいきましょう！

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

この記事を読むと・・・

URLパラメータが取得できる

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

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

作りたいもの
1. 実行環境
URLパラメータを取得しよう
1. URLパラメータ取得の構文
2. 環境
サンプルコード
まとめ

作りたいもの

これが今回の完成形だよ！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

URLパラメータを取得しよう

URLパラメータ取得の構文

myParam: any ;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
// idとして渡されたパラメータを取得
this.route.params.subscribe((params) => (this.myParam = params['id']));
}

いきなり結論ですが、Angularではこのように
ActivatedRouteを使用してURLパラメータを取得します。

これはObservableを返すものなので、
subscribe内でmyParamに取得したパラメータを代入しています。

Observableについて復習したい方はこちら！

【Angular】Observableの中間処理をつくろう！【pipe,tap,map】

URLパラメータを取得するにはURLパラメータを渡す設定も合わせて必要だよ！

環境

app.component.html

<ul>
  <li>
    <a routerLink="/article/1">パラメーター1</a>
  </li>
  <li>
    <a routerLink="/article/2">パラメーター2</a>
  </li>
  <li>
    <a routerLink="/article/3">パラメーター3</a>
  </li>
  <li>
    <a routerLink="/article/4">パラメーター4</a>
  </li>
</ul>

<router-outlet></router-outlet>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticleComponent } from './article/article.component';

const routes: Routes = [{ path: 'article/:id', component: ArticleComponent }];

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

/:idとすることで、”id”というパラメータが渡せるよ！
詳しく知りたい方は下記の記事を参考にしてね！

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

article.component.ts※重要

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

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.scss'],
})
export class ArticleComponent implements OnInit {
  myParam: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.params.subscribe((params) => (this.myParam = params['id']));
  }
}

ここでURLパラメータを取得しているよ！

article.component.html

<p>article works!</p>

<p>受け取ったURLパラメーター：{{ myParam }}</p>

サンプルコード

今回作成したソースはGitHubに置きました。
Angularは環境構築が大変なので
自由にダウンロードして活用してください。

GitHub - same-hack/Angular-get-url-param: AngularでURLパラメータを取得

AngularでURLパラメータを取得. Contribute to same-hack/Angular-get-url-param development by creating an account on GitHub.

まとめ

ActivatedRouteとsubscribeを使用するとURLパラメータが取得できる
constructor(private route: ActivatedRoute) {}
this.route.params.subscribe((params) => (this.myParam = params[‘id’]));

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

twitter
instagram