Почему я получаю несколько Observables?

Question

Я пытаюсь лучше понять Observables, и меня смущает вопрос, почему я, кажется, «порождаю» несколько наблюдаемых, как показано ниже.Например, если я введу «a», «b», «c» в поле ввода, я получу следующий вывод в консоли:

// Keyed: a
// Keyed: ab
// Keyed: ab
// Keyed: abc
// Keyed: abc
// Keyed: abc

, но я думал, что приведенный ниже код будет создавать только один экземплярнаблюдаемый, поэтому я ожидал получить следующий вывод:

// Keyed: a
// Keyed: ab
// Keyed: abc

Код:

import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `<input (keyup)="doStuff()">`
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  obs$: Observable<any>;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.obs$ = fromEvent(this.el.nativeElement, "keyup")
  }

  doStuff() {
    this.obs$.subscribe(v=> console.log("Keyed: " + v.target.value))
  }

Разве ngOnInit() не вызывается только один раз?Так у меня есть только одна наблюдаемая?Если так, почему я не получаю один вывод за нажатие клавиши?Большое спасибо заранее!

Answer 1

при каждом вызове doStuff() создается новая подписка для this.obs$ наблюдаемой.

изменяется

template: `<input (keyup)="doStuff()">`

на

template: `<input>`

и только подпискаоднажды внутрь ngOnInit()

Answer 2

Это происходит потому, что каждый раз, когда вы запускаете событие keyup, вы создаете новую подписку.

Вы можете изменить свой код на следующий

@Component({
  selector: 'my-app',
  template: `<input>`
})
export class AppComponent implements OnInit  {
  name = 'Angular';

  constructor(private el: ElementRef) {}

  ngOnInit() {
    fromEvent(this.el.nativeElement, "keyup")
           .subscribe(v=> console.log("Keyed: " + v.target.value))
  }

}