Získanie adresy IP klienta v aplikácii Angular so 4 krokmi

Blog

Získanie adresy IP klienta v aplikácii Angular so 4 krokmi

Získanie adresy IP klienta v aplikácii Angular so 4 krokmi

Je veľmi jednoduché mať adresu nášho klienta v aplikácii Angular. Pri toľkých otvorených zdrojoch adresy API priamo vracajú IP adresu klienta ako požiadavku klienta z vlastného prehliadača do API.

V tomto článku použijem toto API pre IP adresu klienta v JSON.

zobraziť súkromný twitterový účet

Najprv musíte vytvoriť uhlovú aplikáciu pomocou Angular CLI.

Krok 1

Pridajte novú uhlovú službu do svojej aplikácie pomocou CLI pomocou nasledujúceho príkazu:

služby g IpService

Po tomto príkaze musíte mať v zdroji aplikácie Angular dva nové súbory.

Toto je názov obrázku

Prejdite do Prieskumníka priečinkov a vyhľadajte nové súbory.

Toto je názov obrázku

Krok 2

Teraz otvorte súbor app.module.ts a importujte HttpClientModule z @angular/common/http, aby ste mohli pracovať so službami http: // a volať API.

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

Otvorte servisný súbor a použite nasledujúci kód:

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'); } }

Tu v tomto kóde sme najskôr importovali HttpClient z @angular/common/http a vložili sme závislosť od konštruktéra služby. Nakoniec sme vytvorili funkciu s názvom getIPAddress (), z ktorej vrátime Pozorovateľné tu .

kľúč na odstránenie slovníka pythonu

Krok 3

Teraz otvorte súbor svojich komponentov tak, ako som to urobil na svojom webe app.component.ts. Najprv importujte a vstreknite objekt služby do konštruktora komponentu a predplaťte si funkciu getIpAddress () z vašej služby do lokálnej premennej, ako je to v nasledujúcom kóde:

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; }); } }

Nakoniec otvorte súbor app.component.html a skúste túto premennú vytlačiť pomocou interpolačných zátvoriek.

Your IP Address : {{ipAddress}}

Krok 4

Obsluhujte svoju uhlovú aplikáciu a otvorte ju v prehliadači, aby ste skontrolovali IP adresu. Otvorte preto terminál v kóde Visual Studio a napíšte príkaz:

ako kúpiť apl coin

Podávanie - otvorené

Výstup môžete získať nasledujúcim spôsobom:

Toto je názov obrázku

Tu je IP adresa klienta, dúfame, že sa vám to páčilo!

Ďakujem za čítanie!

#hranaté #adresa #json