Wie HTTP-Anfrage erkennen Benutzer klickt eine Eingabe

Question

Ich habe eine harte Zeit zu denken, wie dies in eckigen 2. Ich möchte eine http-Anfrage nach ein paar Sekunden den Benutzer klickt aus dem Eingabefeld. Die Anfrage würde auf der Eingabe basieren, die der Benutzer eingibt. Irgendeine Idee, wie man das bitte macht? Ich habe jetzt darüber nachgedacht. Danke für Ihre Mitarbeit.

Komponente

<div class="form-group" (clickOutside)="makerequest()"> 
       <input type="email" required>   

    </div> 

ts

makerequest(){ 

//service here 

} 

Answer 1

Sie suchen (blur)="onBlurMethod()" Hier ist ein Beispiel :)

Lassen Sie uns sagen, dass dies Ihre hey.component.service.ts:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class HeyService { 
    constructor (
    private http: Http 
) {} 

    getUser(arg: string) { 
    return this.http.get(`https://api.github.com/users/${arg}`) 
    .map((res: Response) => res.json()); 
    } 
} 

einfache HTML, hey. component.html:

<div> 
    <input type="text" [(ngModel)]="myInput" (blur)="onBlurMethod()"> 
    <p>{{ profile | json }}</p> 
</div> 

Ihre Komponente, hey.component.ts:

import { Component } from '@angular/core'; 
import { HelloService } from './hey.component.service'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './hey.component.html', 
    styleUrls: ['./hey.component.css'] 
}) 
export class HeyComponent { 
    myInput: string; 
    profile = {}; 

    constructor(private heyService: HeyService) { 
    } 

    onBlurMethod() { 
    this.loadUser(this.myInput); 
    } 

    loadUser(arg: string) { 
    this.userService.getUser(this.myInput).subscribe(data => this.profile = data); 
    } 
} 

Erinnerung, den Dienst zu den Anbietern in der App-Modul hinzufügen, wenn Sie einen separaten Service verwenden.

<div class="form-group" (blur)="makeRequest()"> 
    <input type="email" [(ngModel)]="email" required> 
</div> 

und die ts:

In Ihrem speziellen Beispiel die Html wie folgt aussehen

email: string; 

... 

makeRequest(){ 
    this.yourService.yourMethod(this.email); 
} 

Answer 2

Sie eine Funktion für außerhalb Klick in die Eingabefelder auslösen können. Diese Funktion innerhalb schreiben die folgende http Anfrage in Winkel 2 wird funktionieren. Du wirst es versuchen.

let myRequest = this.http.get(...); 
let pollingSubscription = myRequest.expand(() => Observable.timer(5000).flatMap(() => myRequest)); 
.subscribe();