みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はURLパラメータを取得する方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- URLパラメータが取得できる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansboxなどを使ってね!
作りたいもの

これが今回の完成形だよ!
実行環境

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フォローしてもらえると嬉しいです🦈