Angular-Rxjs可观察-点击事件实现

Question

我在实现一个我已经实现的函数的可观察点击事件时遇到了麻烦。到目前为止，我看到的示例是使用fromEvent或Subject实现的，就像这样；

import {Subject} from "rxjs/Subject";

export class Component {

    private clickStream$ = new Subject<Event>();

    @Output() observable$ = this.clickStream.asObservable();

    buttonClick(event:Event) {
        this.clickStream$.next(event);
    }
}

他们的html

<button type="button" (click)="buttonClick($event)">click me</button>

现在考虑下面的实现。

组件技术

export class MyComponent {
  result;
  public search(queryString: string) {
    this.myService.search().subscribe((res) => result = res )
  }
}

index.html

<form [formGroup]="searchForm">
    <input
      formControlName="queryString"
      placeholder="Enter keyword"
      type="text"
      (keyup.enter)="search(searchForm.value.queryString)"
     >
     <div (click)="search(searchForm.value.queryString)"></div> <!-- added an icon with css ->
</form>

服务台

export class SearchService {
constructor(private http: HttpClient) {}

  search(queryString: string) {
    if (!queryString) {
      return;
    }
    return this.http.get(`${this.BASE_URL}&q=${queryString}`);
  }

}

我的问题是如何使用我当前的search（），并且在使用我找到的方法时仍然能够订阅我的myService.search（）方法。（即本文中的示例代码）我理解（我认为）流，以及可观测的概念，但这是我最不理解的。

提前感谢您的帮助。

Answer 1

您的代码存在一些基本问题。

1） 有一些输入错误，即方法，例如您的服务方法（search或searchMedPolicies？）

2） 您没有在组件中导入并初始化formGroup。

3） 处理组件上的订阅的方式—无需在订阅上添加return语句。

对于订阅事件，只需使用next（）将单击事件馈送给主题即可。

然后，您可以订阅clickStream$主题并发出必要的HTTP请求。

以下是我建议的更正。

<form [formGroup]="searchForm">
  <input
    formControlName="queryString"
    placeholder="Enter keyword"
    type="text"
    (keyup.enter)="onSearch()"
   >
   <div (click)="onSearch($event)"></div> 
</form>

在你的component.ts上，

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Subject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// other imports 

@Component({
  // etc etc
})

export class YourComponent implements OnInit {
  clickStream$ = new Subject<Event>();

  searchForm = this.fb.group({
    queryString: '',
  })

  constructor(
    private fb: FormBuilder, 
    private myService: SearchService,
  ) { }

  ngOnInit() {
    this.clickStream$
      .pipe(
        switchMap((event) => {            
          const { queryString } = this.searchForm.value;
          // console.log(event);
          // console.log(queryString);

          return this.myService.search(queryString)
        }),
      ).subscribe(response => {
        console.log(response);
        // do the rest
      });
  }

  onSearch() {
    this.clickStream$.next(event);
  }
}

在您的service.ts上，确保方法名称也匹配。

export class SearchService {

  constructor(private http: HttpClient) {}

  search(queryString: string) {
    if (!queryString) {
      return;
    }
    return this.http.get(`${this.BASE_URL}&q=${queryString}`);
  }

}