Abrufen der Client-IP-Adresse in der Angular-App in 4 Schritten

Blog

Abrufen der Client-IP-Adresse in der Angular-App in 4 Schritten

Abrufen der Client-IP-Adresse in der Angular-App in 4 Schritten

Es ist sehr einfach, unsere Kundenadresse in einer Angular-Anwendung zu haben. Bei so vielen offenen Quellen geben API-Adressen die IP-Adresse des Clients direkt als Client-Anfrage von seinem eigenen Browser an die API zurück.



In diesem Artikel verwende ich diese API für die Client-IP-Adresse in JSON.

locast.org-App/aktivieren

Zuerst müssen Sie eine Angular-Anwendung mit der Angular-CLI erstellen.



Schritt 1

Fügen Sie mithilfe der CLI mit dem folgenden Befehl einen neuen Angular-Dienst in Ihrer App hinzu:



des g-Dienstes IPService

Nach diesem Befehl müssen Sie zwei neue Dateien in Ihrer Angular-App-Quelle haben.

Das ist der Bildtitel

Gehen Sie zum Ordner-Explorer und suchen Sie nach neuen Dateien.

Das ist der Bildtitel

Schritt 2

Öffnen Sie nun die Datei app.module.ts und importieren Sie HttpClientModule von @angular/common/http, damit Sie mit http://-Diensten arbeiten und API aufrufen können.

import { HttpClientModule } from '@angular/common/http'; imports: [ ...,HttpClientModule ]

Öffnen Sie Ihre Servicedatei und verwenden Sie den folgenden Code:

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class IpServiceService { constructor(private http:HttpClient) { } public getIPAddress() { return this.http.get('http://api.ipify.org/?format=json'); } }

Hier in diesem Code haben wir zuerst HttpClient von @angular/common/http importiert und eine Abhängigkeit in den Dienstkonstruktor eingefügt. Schließlich haben wir eine Funktion namens getIPAddress() erstellt, von der aus wir ein Observable from zurückgeben Hier .

Python-Modus der Liste

Schritt 3

Öffnen Sie nun Ihre Komponentendatei wie in meiner app.component.ts. Importieren und injizieren Sie zunächst das Dienstobjekt in den Konstruktor der Komponente und abonnieren Sie die Funktion getIpAddress() von Ihrem Dienst in eine lokale Variable, wie im folgenden Code:

import { Component, OnInit } from '@angular/core'; import { IpServiceService } from './ip-service.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(private ip:IpServiceService){} title = 'DemoApp'; ipAddress:string; ngOnInit() { this.getIP(); } getIP() { this.ip.getIPAddress().subscribe((res:any)=>{ this.ipAddress=res.ip; }); } }

Öffnen Sie schließlich Ihre app.component.html und versuchen Sie, diese Variable mit Interpolationsklammern zu drucken.

Your IP Address : {{ipAddress}}

Schritt 4

Stellen Sie Ihre eckige App bereit und öffnen Sie sie in Ihrem Browser, um die IP-Adresse zu überprüfen. Öffnen Sie also das Terminal im Visual Studio-Code und schreiben Sie den Befehl:

wo kann man apl-Münzen kaufen?

Ng servieren –öffnen

Sie erhalten möglicherweise die Ausgabe wie unten gezeigt:

Das ist der Bildtitel

Hier ist die Client-IP-Adresse, ich hoffe, es hat Ihnen gefallen!

Vielen Dank fürs Lesen!

#eckig #ipaddress #json