angular - 为什么我会得到多个 Observables？

Question

我试图更好地理解 Observables，但我很困惑为什么我似乎会“产生”多个 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() 不是只被调用一次吗？那么我不是只有一个 Observable 吗？如果是这样，为什么我每次击键不能得到一个输出？

Answer 1

每次调用 doStuff() 都会为 this.obs$ observable 创建新的订阅。

改变

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

到

template: `<input>`

并且在ngOnInit()内仅订阅一次