Question

我很难想到如何在角度2中执行此操作。我想在用户单击输入框几秒钟后发出一个http请求。请求将基于用户输入的输入。有关如何做到这一点的任何想法吗？现在一直在努力思考这个问题。谢谢你的合作。

组件

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

  </div>

TS

makerequest(){

 //service here

}

Answer 1

您可以在输入字段中触发单击外部的功能。此函数内部在角度2中写入以下http请求将起作用。你会试试。

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

Answer 2

您正在寻找(blur)="onBlurMethod()" 这是一个例子：）

让我们说这是你的 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());
  }
}

简单的html， hey.component.html ：

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

您的组件 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);
  }
}

如果您使用的是单独的服务，请提醒您将服务添加到应用模块中的提供商。

在您的具体示例中， Html 将如下所示：

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

和 ts ：

email: string;

...

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

如何使HTTP请求检测用户点击输入

2 个答案: