Angular 角度-Rxjs可观测-点击事件实现

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

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

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>

我的问题是如何使用我当前的

search（）

，并且在使用我找到的方法时仍然能够订阅我的

myService.search（）

方法。（即本文中的示例代码） 我理解（我认为）流，和可观测的概念，但这是踢我的屁股

---

提前感谢您的帮助

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

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

search

或

searchMedPolicies

？）

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

formGroup

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

对于订阅事件，您只需使用

next（）

将click事件馈送到订阅服务器即可

然后，您可以订阅

clickStream$

主题并发出必要的HTTP请求

以下是我建议的更正

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

---

1.您需要使用正确的方法名称

onSearch

与

search

的名称不同，应引发异常。2.您无法从subscribe返回任何有用的内容。您可以进行分配，但返回res是无用的。如果您想查看最新的值，可以在组件中创建一个字段并分配给该值，或者使用异步管道并从方法返回一个可观察值（或者将结果可观察值分配给组件中的一个字段）。3.您的组件方法

search

接收到一个输入，但您在服务调用中对此不做任何处理，为什么？使用

@Output（）。下面是
@Output
解释@Igor抱歉，我试图简单地从我的原始代码中提取我的示例，这样我就可以隐藏一些根本不重要的东西。我已经更新了我的examples@sneas你们有一个可以在我想要完成的事情中使用可观察到的和点击事件的有效实现吗？感谢你们找到了一些打字错误之类的东西，我试图简化我的例子@wentjun我已经用我的本地代码初始化了表单，如果你有一个例子说明我如何实现点击可观察的，那就太好了。@Diego完成了。基本上，我所做的是将事件提供给
clickStream$
主题，并订阅它。我想我关心的是将
clickStream$
放在构造函数中，是否有方法提取到其他地方，比如在构造函数中不使用它？@Diego是的，你是对的。您可以将该代码放在
ngOnInit（）
生命周期挂钩中。让我来做些改变
<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}`);
  }

}

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

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

export class SearchService {

  constructor(private http: HttpClient) {}

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

}