Angular-Rxjs可观察-Clicking事件实现 [英] Angular - Rxjs Observable - Clicking event implementation

问题描述

在将Observable click事件实现到我已经实现的功能上时，我遇到了麻烦.到目前为止，我所看到的示例都是使用 fromEvent 或 Subject 实现的；

I'm having trouble wrapping my head around implementing an Observable clicking event to a function I already implemented. The examples I have seen so far are implemented using the fromEvent or Subject like so;

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>

现在在下面考虑我的实现方式.

Now consider my implementation below.

component.ts

component.ts

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

index.html

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>

service.ts

service.ts

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()方法.(即本文中的示例代码)我了解(我认为)信息流和Observables的概念，但是这确实让我大吃一惊.

My trouble is how to use my current search() and still be able to subscribe to my myService.search() method while using the approach I found. (i.e. the example code in this post) I understand ( I think ) streams, and the concept of Observables, but yet this is kicking my butt.

在此先感谢您的帮助.

推荐答案

您的代码存在一些根本性的问题.

There are some fundemental issues with your code.

1)有一些错别字，即诸如您的服务方法之类的方法( search 或 searchMedPolicies ?)

1) There are a few typos, namely the methods such as your service method (search or searchMedPolicies?)

2)您没有在组件中导入和初始化 formGroup .

2) You did not import and initialise your formGroup within your component.

3)处理组件上订阅的方式-无需在订阅上添加return语句.

3) The way you handle your subscriptions on your component - there is no need to add the return statement on your subscription.

对于您的订阅事件，您只需将点击事件输入到您的主题使用 next().

As for your subscription event, you can simply feed the click event to your Subject using next().

然后，您订阅 clickStream $ 主题并进行必要的HTTP请求.

Then, you subscribe to your clickStream$ Subject and make the necessary HTTP requests.

这是我建议的更正.

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

在您的component.ts上，

And on your 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上，确保方法名称也匹配.

And on your service.ts, make sure the method names are matching too.

export class SearchService {

  constructor(private http: HttpClient) {}

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

}

这篇关于Angular-Rxjs可观察-Clicking事件实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！