从提交事件创建可观察对象

Question

免责声明：我对 Angular 和 RXJS 都是超级新手。我有一个简单的表单，我试图从中创建一个可观察的对象。这将查找submit事件并更新组件中的某些值。但是，我收到一个this._subscribe is not a function错误。<form (submit)='submitForm()'>  <button type='submit'>Submit</button></form>我的组件import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs';import UtilsHelperService from '../services/utils-helper.service';@Component({...stuffs...})export class HomeComponent implements OnInit {  formSubmit: Observable<any>;  counter = 0;   constructor() { }  ngOnInit() {    const form = document.getElementsByTagName('form')[0];    this.formSubmit = Observable.create(form, 'submit');  }  submitForm() {    this.formSubmit.subscribe(      UtilsHelperService.formSubmitObserver(this.counter));  }}还有我的utils-helper.service.ts助手班...import {Injectable} from '@angular/core';@Injectable({  providedIn: 'root'})export default class UtilsHelperService {  static formSubmitObserver(counter) {    return {      next: (value) => {        counter++;      },      error: err => console.log(err),      complete: () => console.log('complete')    }  }}我看到formSubmit观察者创建得很好。我有一个UtilsHelperService.formSubmitObserver方法，它返回一个observer具有 3 个必要方法的对象。所以，我不确定是我做错了 Angular 的东西（我猜不是）还是 RXjs 的东西。

Answer 1

我做了两件事来解决这个问题：

1. 使用fromEvent而不是Observable.create从submit事件创建可观察对象。这样订阅就不会抛出错误（调查原因..）

2. 由于服务是单例，因此无法从服务更新组件属性。您必须使用 eventemitter 或使用 AngularJS 样式点规则。对于这种情况，我在组件本身中添加了所有辅助逻辑。

ngOnInit() {

  const form = document.getElementsByTagName('form')[0];

  this.formSubmit = fromEvent(form, 'submit');

  this.formSubmit.subscribe((submitEvent) => {

    this.counter++;

    this.formSubmitted.emit(this.counter);

  })

}

有了这个，我可以submitForm从组件和模板中删除方法，并从服务中删除辅助方法。