import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { HttpClient} from '@angular/common/http'; import { throttleTime } from "rxjs/operators"; // this endpoint is implemented in https://github.com/wangzixi-diablo/ui5-toolset, local.js const APIENDPOINT = "http://localhost:3000/echo?data="; @Component({ selector: 'jerryform', templateUrl: './react-form.component.html' }) export class JerryReactFormComponent implements OnInit { constructor(private http:HttpClient){} response = ''; onValueChanged = (value)=>{ console.log('new value from live change: ' + value); const url = `${APIENDPOINT}${value}`; const options = { responseType: 'text' as 'json' } var $http = this.http.get(url, options); $http.subscribe( (response:string)=>{ console.log('response from http: ' + response); this.response = response}, (error)=>console.log('error: ' + error)); } ngOnInit(): void { // this.jerryFormControl.valueChanges.pipe(debounceTime(3000)).subscribe(this.onValueChanged); this.jerryFormControl.valueChanges.pipe(throttleTime(2000)).subscribe(this.onValueChanged); } jerryFormControl = new FormControl(''); }
在 Component 的实现代码里,我们并不会直接操作 template 里的 input 标签,而是通过其绑定的 formControl 实例 jerryFormControl 暴露出的 valueChanges Observable,来注册我们应用程序自己的逻辑,即事件响应函数 onValueChanged.