AngularでURL引数(クエリ文字列)をHTTPリクエストに渡す方法

2024-04-02

AngularでURL引数(クエリ文字列)をHTTPリクエストに渡す方法

@QueryParam デコレータを使う

これは最も簡単な方法の一つです。コンポーネントクラスのメンバー変数に @QueryParam デコレータを付けることで、URL引数をその変数にバインドできます。

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  id: number;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params) => {
      this.id = params['id'];
    });
  }
}

この例では、id という名前のURL引数を id というメンバー変数にバインドしています。

HttpParams クラスを使って、URL引数を手動で設定することもできます。

import { HttpClient, HttpParams } from '@angular/common/http';

const params = new HttpParams().set('id', 123);

this.httpClient.get('/api/users', { params }).subscribe((response) => {
  // ...
});

import { HttpClient, URLSearchParams } from '@angular/common/http';

const params = new URLSearchParams();
params.append('id', '123');

this.httpClient.get('/api/users', { params }).subscribe((response) => {
  // ...
});

サービスを使う

URL引数を処理するサービスを作成し、そのサービスをコンポーネントで注入することもできます。

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(private httpClient: HttpClient) {}

  getUsers(params: HttpParams) {
    return this.httpClient.get('/api/users', { params });
  }
}

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  constructor(private apiService: ApiService) {}

  ngOnInit() {
    const params = new HttpParams().set('id', 123);

    this.apiService.getUsers(params).subscribe((response) => {
      // ...
    });
  }
}

この例では、ApiService というサービスを作成し、getUsers というメソッドでURL引数を処理しています。

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor() {}
}

<h1>AngularでURL引数(クエリ文字列)をHTTPリクエストに渡す</h1>

<p>
  <a routerLink="/users?id=123">ユーザー123を表示</a>
</p>

<router-outlet></router-outlet>

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

@Component({
  selector: 'my-users',
  templateUrl: './users.component.html',
})
export class UsersComponent implements OnInit {
  id: number;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params) => {
      this.id = params['id'];
    });
  }
}

<h1>ユーザー{{ id }}</h1>

<p>
  </p>

このサンプルコードを実行すると、ブラウザのURLに ?id=123 と入力すると、UsersComponent コンポーネントが表示され、id 変数に 123 という値が設定されます。

上記以外にも、URL引数を処理する方法はいくつかあります。詳細については、Angular ドキュメントを参照してください。

URL引数を処理するその他の方法

Location サービスを使って、現在のURLを取得したり、URLを変更したりすることができます。

import { Location } from '@angular/common';

this.location.go('/users?id=123');

この例では、Location サービスを使って、URLを /users?id=123 に変更しています。

Router サービスを使って、別のコンポーネントに移動したり、URLパラメータを設定したりすることができます。

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

this.router.navigate(['/users', 123]);

この例では、Router サービスを使って、UsersComponent コンポーネントに移動し、id パラメータを 123 に設定しています。

クエリパラメータスナップショットを使う

ActivatedRoute サービスから queryParamsSnapshot プロパティを取得することで、現在のURLパラメータを取得することができます。

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

const id = this.activatedRoute.queryParamsSnapshot.get('id');

この例では、queryParamsSnapshot プロパティを使って、id という名前のURLパラメータを取得しています。

http angular typescript

AngularでURL引数(クエリ文字列)をHTTPリクエストに渡す方法