首先

这次我尝试使用Angular获取IP地址。
意外地很容易实现。
只是为了下次再次实现时留下备忘录。
希望对其他人也能有所参考。

版本

• Angular: 9.1.11

バージョンの確認方法については過去記事に記載しております。

在得出結論之前

我们不仅使用Angular的功能来获取IP地址，还使用名为”ipinfo.io”的服务。只需使用这个服务，就能轻松地获取IP地址。这个服务即使免费也非常有用，强烈推荐使用。

结论

Angular 的模块设置可以参考与服务器通信的设置。

// 前略
import { HttpClientModule } from '@angular/common/http';

// 中略
@NgModule({
  imports: [
    HttpClientModule,

// 後略

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit
{

  constructor(
    private httpClient: HttpClient
  ) {}

  async ngOnInit(): Promise<void> {
    try {
      const ipAddress = await new Promise((resolve, reject) => {
        this.httpClient.get("https://ipinfo.io")
          .subscribe(data => {
            return resolve(data['ip']);
          }, error => {
            return reject(error);
          });
      });
      console.log(ipAddress);
    } catch(error) {
      console.log(error);
    }
  }
}

文献引用

ipinfo.io

Angular：与服务器通信的设置