Создание наблюдаемого от отправки события - PullRequest
Новая
       23

Создание наблюдаемого от отправки события

0 голосов
/ 03 июня 2019

Отказ от ответственности : я очень плохо знаком с 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 необходимыми методами.

Итак, я не уверен, является ли это угловыми вещами I 'я делаю неправильно (что я думаю, нет) или его вещи RXjs.Спасибо, что уделили мне время на чтение :) 1038

Ответы [ 2 ]

1 голос
/ 03 июня 2019

Посмотрите на FormGroup.Его свойство valueChanges является наблюдаемой, на которую можно подписаться. 

FormGroup formGroup;

// populate your formGroup (https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance)

formGroup.valueChanges.subscribe(// do whatever you want);
0 голосов
/ 05 июня 2019

Для решения этой проблемы я сделал 2 вещи:

  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 из компонента и шаблона и вспомогательный метод из службы.

...