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

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

我做了两件事来解决这个问题：使用fromEvent而不是Observable.create从submit事件创建可观察对象。这样订阅就不会抛出错误（调查原因..）由于服务是单例，因此无法从服务更新组件属性。您必须使用 eventemitter 或使用 AngularJS 样式点规则。对于这种情况，我在组件本身中添加了所有辅助逻辑。ngOnInit() {&nbsp; const form = document.getElementsByTagName('form')[0];&nbsp; this.formSubmit = fromEvent(form, 'submit');&nbsp; this.formSubmit.subscribe((submitEvent) => {&nbsp; &nbsp; this.counter++;&nbsp; &nbsp; this.formSubmitted.emit(this.counter);&nbsp; })}有了这个，我可以submitForm从组件和模板中删除方法，并从服务中删除辅助方法。