Question

我试图更好地理解Observable，并且对为什么我似乎“产生”多个Observable感到困惑。例如，如果我在输入框中键入“ 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$创建新的订阅。

更改

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))
  }

}

为什么我得到多个可观察物？

2 个答案: